svg学习之旅（2）

基本图形

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-width: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-width: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-width:2"/>

ploygon 多边形

points 属性定义多边形每个角的 x 和 y 坐标

　　例子 ： <polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
 path 路径

建议看这个、我看了更不懂了0.0    http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/