SVG 中的基本形状
SVG 使用的是 XML 标记语言，需要注意元素与属性是大小写敏感，并且属性值必须放在引号内。
SVG 图形中左上角为坐标原点，向右为 x 轴正方向，向下为 y 正方向，后续介绍的坐标都是基于这个坐标系来定的。
矩形 <rect>
矩形有 6 个基本属性，如下示意图所示。里面最难理解的就是 rx,ry 这两个属性，它们控制的是矩形四个角的半径，可以把每个角看成一个椭圆的 1/4，rx 和 ry 就控制着这个椭圆两个方向上的半径。
上图中间黑色区域就是下面这个 SVG 的图形。
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="30" rx="40" ry="70" width="300" height="250"/>
</svg>
rx,ry 实际起作用的值不会超过宽度和高度的一半，如下实际起作用的 rx=75,ry=40，矩形变成一个椭圆。
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" rx="110" ry="70" width="150" height="80"/>
</svg>
圆形 <circle>
圆形就三个参数，定义圆心和半径。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" />
</svg>
椭圆形 <ellipse>
椭圆四个参数定义了圆心和两个方向的半径，它的两个轴线平行于 x 轴 y 轴。
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="85" cy="50" rx="75" ry="40" />
</svg>
线段 <line>
两个点共四个参数定义了一个线段。
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="90" x2="180" y2="5" stroke="black" stroke-width="1" />
</svg>
折线 <polyline>
折线只有一个属性 points，列出一组相连的点，x 和 y 的坐标用逗号分隔，点与点之间用空格分隔。下面示例用四个点连线画出一个“Z”字形。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none" stroke-width="2">
<polyline points="50,50 150,50 50,150 150,150" />
</svg>
多边形 <polygon>
多边形就是一个把首尾的点连线闭口的折线，也是只有一个 points 属性。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none" stroke-width="2">
<polygon points="50,50 150,50 50,150 150,150" />
</svg>