svg path大法d属性详解

svg:
path有d属性，而d属性是最牛B的！

<svg width="100%" height="100%">
 <path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="#000" stroke-width="10" transform="translate(5,5)"></path>
</svg>
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

• M：画笔起始位置
• L：画直线（x，y）坐标
• Z：自动闭合
• fill： 填充颜色
• stroke：描边颜色
• stroke-width：描边宽度
• transform="translate(x,y)": 加了描边后需要平移（x=stroke-width/2,
  y=stroke-width/2）

例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

如果是虚线：

<svg width="100%" height="100%">
        <path d="M0,40 H240" stroke="#333" stroke-width="10" transform="translate(5,5)" stroke-dasharray="20" stroke-dashoffset="10"></path>
        //间隔20像素绘制一次
 </svg>

stroke-dasharray：(Number)间隔多少像素绘制一次

stroke-dashoffset：(Number) 每次绘制偏离多少，必须配合stroke-dasharray使用

下一节我讲一下path的三次贝塞尔曲线使用方法！