清单 5. 创建不规则的线
双击代码全选
|
1
2
3
4
5
|
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:white;stroke:red;stroke-width:3"/>
</svg>
|
清单 5 中的代码会生成图 5 所示的图形。
图 5. 不规则线
rect 元素
创建一个矩形非常简单，只需定义宽度和高度，如清单 6 所示。
清单 6. 创建矩形
双击代码全选
|
1
2
3
4
5
|
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
<rect width="300" height="100"
style="fill:red"/>
</svg>
|
清单 6 中的代码会生成图 6 中的图形。
图 6. 矩形
您也可以使用
rect 标记创建一个正方形，正方形就是高和宽相等的矩形。
circle 元素
要创建一个圆，可以定义圆心的 x 和 y 坐标和一个半径，如清单 7 所示。
清单 7. 创建一个圆
双击代码全选
|
1
2
3
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" fill="red"/>
</svg>
|
清单 7 中的代码会生成图 7 中的图形。
图 7. 圆
cx 和
cy 属性定义圆心相对于绘图画布的位置。因为半径是圆宽度的一半，所以在定义半径时，请记住图像的总宽度将是该值的两倍。
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. 星形
path 元素
使用
path 元素（所有绘图元素中最复杂的），可以使用一组专门的命令创建任意图形。
path 元素支持表 2 中的命令。
(责任编辑：12图资源库)
