SVG基础六:椭圆
来源:互联网 发布:网络招生实战 丁丛 编辑:程序博客网 时间:2024/05/17 01:45
<ellipse> 标签可用来创建椭圆。
<ellipse> 标签
<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。
请把下面的代码拷贝到记事本,然后把文件保存为 "ellipse1.svg"。把此文件放入您的 web 目录:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/></svg>
代码解释:
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
查看例子
下面的例子创建了三个累叠而上的椭圆:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><ellipse cx="240" cy="100" rx="220" ry="30"style="fill:purple"/><ellipse cx="220" cy="70" rx="190" ry="20"style="fill:lime"/><ellipse cx="210" cy="45" rx="170" ry="15"style="fill:yellow"/></svg>
查看例子
下面的例子组合了两个椭圆(一个黄的和一个白的):
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><ellipse cx="240" cy="100" rx="220" ry="30"style="fill:yellow"/><ellipse cx="220" cy="100" rx="190" ry="20"style="fill:white"/></svg>
查看例子
阅读全文
0 0
- SVG基础六:椭圆
- SVG 形状_椭圆
- SVG椭圆的实现
- SVG -椭圆曲线简介
- SVG Dom绘制椭圆
- 绘图基础--椭圆
- SVG基础 | SVG PATH 元素
- SVG基础一:认识SVG
- SVG基础二:SVG编写
- (6)SVG中所用到的形状简介------椭圆
- HTML5学习(3) SVG的学习及应用二(椭圆)
- svg基础 3
- svg基础 4 路径
- svg基础 4 标记
- svg基础 结束
- svg基础学习笔记
- SVG基础学习
- HTML5 学习---------(SVG 基础)
- mycat分布式mysql中间件(入门)
- 面向对象笔记
- C#基础系列——反射笔记
- leetcode_4Sum、4Sum II
- Vivado 时序问题简析
- SVG基础六:椭圆
- VC调试信息的输出
- OpenGL——理解SSAO
- 医疗行业安全建设方案
- node.js ejs的视图模块引擎
- js取得文档的高度和宽度
- Docker 组件如何协作?- 每天5分钟玩转Docker容器技术(8)
- Hadoop面试45个题目及答案
- 【Oracle】查看当前连接数和最大连接数