<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. Find和FirstOrDefault()有什么区别?

    Find方法和FirstOrDefault方法效果相同,都是返回满足条件的第一个元素,如果没有该元素,则返回null. 那么这两个扩展方法有什么不同? 1)Find方法是.netFramework2. ...

  2. BZOJ3442: 学习小组

    Description [背景] 坑校准备鼓励学生参加学习小组. [描述]     共有n个学生,m个学习小组,每个学生有一定的喜好,只愿意参加其中的一些学习小组,但是校领导为学生考虑,规定一个学生最 ...

  3. docker 报错Failed to start Docker Storage Setup. 的处理基本都是容器满了

    :: localhost docker-storage-setup: Volume group extents): required. Apr :: localhost systemd: docker ...

  4. 纪念逝去的岁月——C/C++字符串旋转

    几年前,我还不会写这个 例如: 1.向右→旋转5个字符 输入:HelloWorld 输出:WorldHello 2.向右→旋转3个字符 输入:HelloWorld 输出:rldHelloWo 代码 # ...

  5. Number Sequence

    Number Sequence   A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) ...

  6. django1.9 创建数据表

    1.在setting.py 中注册app: 2.编写models.py 文件创建表结构: (生成的表默认是: app名称_定义的表面  ) 3.执行命令: python manage.py check ...

  7. vsphere平台windows虚拟机克隆的小插曲

    问题: 1.克隆完windows虚拟化后输入法乱码. 2.开启远程的情况下远程登录输入正确的密码也无法登录. 解决: 1.更改管理员用户密码(不输入原win7密码更改win7密码). 2.重新启用管理 ...

  8. 安装redis时遇到zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录

    参考博文,http://www.phperz.com/article/14/1219/42002.html 解决办法 make MALLOC=libc

  9. spring security 管理会话 多个用户不可以使用同一个账号登录系统

    多个用户不能使用同一个账号同时登陆系统. 1. 添加监听器 在web.xml中添加一个监听器,这个监听器会在session创建和销毁的时候通知Spring Security. <listener ...

  10. Zabbix自带模板监控MySQL

    先使用主机链接Mysql模板 . 然后写获取mysql状态的脚本,即配合zabbix模板里面的参数的脚本. #!/bin/bash MYSQL_USER='zabbix' #这里为在本地数据库授权的账 ...