矩形 rect

x，y：起点坐标。（左上角）
width，height：宽高。
rx，ry：圆角半径。如果只指定一个，另一个会赋相同值。

四个矩形：

<rect fill="red" height="50%" width="50%" x="0" y="0"/>
<rect fill="pink" height="50%" width="50%" x="50%" y="0"/>
<rect fill="blue" height="50%" width="50%" x="0" y="50%"/>
<rect fill="yellow" height="50%" width="50%" x="50%" y="50%"/>

效果：

圆角矩形：

<rect fill="red" height="50%" width="50%" x="0" y="0" rx="40"/>
<rect fill="pink" height="50%" width="50%" x="50%" y="0" rx="80"/>
<rect fill="blue" height="50%" width="50%" x="0" y="50%" rx="120"/>
<rect fill="yellow" height="50%" width="50%" x="50%" y="50%" rx="50%"/>

效果：

圆 circle

cx，cy：圆心坐标。
r：半径。

<circle cx="300" cy="300" r="200" fill="pink"/>

效果：

椭圆 ellipse

cx，cy：圆心坐标。
rx，ry：两个半径。

<ellipse cx="300" cy="300" rx="300" ry="200" fill="pink"/>

效果：

直线 line

x1，y1：起点坐标。
x2，y2：终点坐标。

<line x1="0" y1="0" x2="300" y2="300" stroke="red" stroke-width="1"/>

效果：

折线 polyline

points：坐标字符串。x1 y1，x2 y2，x3 y3…

<polyline points="50 0,61 35,98 35,68 57,79 91,50 70,21 91,32 57,2 35,39 35,50 0"
		  fill="red"
/>

效果：

多边形 polygon

和折线的不同：多边形会自动闭合，首尾相连。

<polygon points="50 0,61 35,98 35,68 57,79 91,50 70,21 91,32 57,2 35,39 35"
		 fill="red"
/>

效果：

路径 path

太复杂，先不提。