使用SVG绘制图形是非常简单的，SVG内置6个基本图形，和4个基本属性
<circle>
<ellipse>
<line>
<rect>
<polyline>
<polygon>
fill 填充颜色
stroke 描边颜色
stroke-width 描边粗细
transform 变换
<circle>是最简单的，你可以用它来绘制一个圆
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="150px" cy="150px" r="50px" fill="red"/>
</svg>
绘制一个圆形，只需要一个圆心（cx,cy），一条半径（r）即可。
<ellipse>仅仅是在<circle>的基础上增加了另外一条半径
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="150px" cy="150px" rx="50px" ry="25px" fill="red"/>
</svg>
<line> 两点确定一条直线
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300px" y2="300px" stroke="red"/>
</svg>
<rect>绘制矩形，偏移量（x,y）相对左边，width，height描述高宽，（rx,ry）描述四角弧度。
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="30px" y="30px" width="100px" height="100px" rx="10px" ry="15px" fill="red">
</svg>
<polyline>很有趣，意为折线，n条折线，由n-1个点组成，其实就是一个点集，格式为points="x1 y1 x2 y2..."
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="0 0 30 30 60 0" stroke="red" fill="#fff"/>
</svg>
<polygon>意为多边形，和折线差不多，其实也是一个点集，但polygon要求图形闭合，即开始点和结束点要相连，格式同位points="x1 y1 x2 y2..."
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 0 30 30 60 0 0" stroke="red" fill="#fff"/>
</svg>
