<ellipse> 标签

<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。

<?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>

svg学习(五)ellipse的更多相关文章

  1. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  2. SVG 学习<一>基础图形及线段

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<三>渐变

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. SVG学习笔录(一)

    SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...

  10. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

随机推荐

  1. 【bzoj2631】tree link-cut-tree

    2016-06-01 08:50:36 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2631 注意加和乘的标记下传问题. 还有就是split后 ...

  2. BZOJ3293: [Cqoi2011]分金币

    Description 圆桌上坐着n个人,每人有一定数量的金币,金币总数能被n整除.每个人可以给他左右相邻的人一些金币,最终使得每个人的金币数目相等.你的任务是求出被转手的金币数量的最小值. Inpu ...

  3. django前端到后端一次简单完整的请求实例

    请求过程: 用户请求---〉django的路由系统---〉根据url不同分发到不同的views函数做对应处理----〉返回html格式的字符串(需要动态请求的到数据库里面拿到数据迁入到html文件中) ...

  4. php读取html文件(或php文件)的方法

    一.使用fopen()函数   此函数主要传入的是头两个参数(第一个是文件地址,第二个是打开方式),可以读取任何一个文本文件,然后用while将fopen函数读取到的每一行数据循环输出.   如:   ...

  5. 关于在VS 上发布网站

    在vs 上建立的网站只能用 localhost 进行访问,想要自己本机上的网站发布到IIS上面,这样就可以直接用 IP 地址来访问了,那么照如下的方式做: 1. 首先需要使用vs 发布自己的网站 1. ...

  6. php+curl上传文件

    因为公司项目用java做的,需要我这边用php上传文件.只给了个接口,参数都不明确,然后这边不提交表单,在生成pdf之后就立马上传.用了php+curl,总是没上传成功,这里看到了篇文章http:// ...

  7. mysql分区及实例演示

    一.为什么要分区? 需求:大数据.解决方案:分而治之,更细一点即为.将大表和大索引分为一个更小的操作单元 在mysql中,分区允许将表.索引和索引编排表细分为更小的单元.分区后,每个分区有自己单独的名 ...

  8. SQL Server 存储过程(转)

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...

  9. windows内核 内存管理

    一.几个基本的概念 1.存储器的金字塔结构 存储器从下之上依次是磁盘/flash.DRAM(内存).L2-cache.L1-cache.寄存器,越在上面的存储器访问速度越快,同时价格也越昂贵,每一级都 ...

  10. 面向系统管理员的10款Linux GUI工具 (转自51cto)

    如果你是名系统管理员,现已到了Linux非知道不可的地步.如果你在更庞大的环境下工作,更是如此.许多企业组织已迁离了一切都借助点击式GUI来管理的Windows.幸好,Linux也有许多GUI工具可以 ...