标题: HTML5 中的可缩放矢量图形（SVG）-创建基本形状更新 [打印本页]

---

作者: look_w    时间: 2018-10-17 19:18     标题: HTML5 中的可缩放矢量图形（SVG）-创建基本形状更新

ellipse 元素椭圆基本上是一个圆，其中的代码定义了两个半径，如清单 8 所示。
清单 8. 创建一个椭圆

1 2 3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;"/> </svg>

清单 8 中的代码会生成图 8 中的图形。
图 8. 椭圆再次说明，cx 和 cy 属性定义了相对于画布的中心坐标。但是对于椭圆，需要使用 rx 和 ry 属性为 x 轴定义一个半径，为 y 轴定义一个半径。            
polygon 元素多边形这个形状包含至少 3 条边。清单 9 创建了一个简单的三角形。            
清单 9. 创建一个三角形

1 2 3 4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <polygon points="200,10 250,190 160,210"         style="fill:red;stroke:black;stroke-width:1"/> </svg>

清单 9 中的代码会生成图 9 中的图形。
图 9. 三角形                类似于 polyline 元素，可使用 points 属性定义几对 x 和 y 坐标来创建多边形。            
                可以通过添加 x 和 y 对，创建具有任意多条边的多边形。通过修改上一个示例，可以创建一个四边形，如清单 10 所示。            
清单 10. 创建一个四边形

1 2 3 4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <polygon points="220,10 300,210 170,250 123,234"         style="fill:red;stroke:black;stroke-width:1"/> </svg>

清单 10 中的代码会生成图 10 中的图形。
图 10. 四边形甚至可以使用 polygon 标记创建复杂的形状。清单 11 创建一个星形。            
清单 11. 创建一个星形

1 2 3 4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">       <polygon points="100,10 40,180 190,60 10,60 160,180 100,10"             style="fill:red;stroke:black;stroke-width:1"/> </svg>

清单 11 中的代码会生成图 11 中的图形。
图 11. 星形

---

欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)

Powered by Discuz! 7.0.0