基本图形
circle 圆
cx基于X轴的坐标位置 cy基于y轴的坐标位置 r圆的半径
fill 填充 transparent透明 stroke 边框 stroke-width 边框宽度 stoke-opacity 透明度
style方式 fill stroke stroke-width
例子： <circle cx="100" cy="100" r="40" style="fill:white;stroke:black;stroke-5;"></circle>
rect 矩形
width height x基于X轴的坐标位置 y基于y轴的坐标位置 边框的圆角 rx x轴的半径 ry y轴的半径
例子：<rect width="200" height="200" x="100" y="100" fill="red" rx="30"></rect>
line 线
x1 y1 x2 y2 两个端点的坐标值
例子：<line x1="50" y1="50" x2="200" y2="300" stroke="black" stroke-width="5" stroke-opacity
="0.5"></line>
ellipse 椭圆
cx 属性定义圆点的 x 坐标 cy 属性定义圆点的 y 坐标 rx 属性定义水平半径 ry 属性定义垂直半径
例子：<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-2"/>
polyine 折线
points="开始,x y,结尾"
例子：<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-2"/>
ploygon 多边形
points 属性定义多边形每个角的 x 和 y 坐标
例子 ： <polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc; stroke:#000000;stroke-1"/>
path 路径
建议看这个、我看了更不懂了0.0 http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/