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 width="100%" height="100%">
    <defs>
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);
    stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgb(255,0,0);
    stop-opacity:1"/>
    </linearGradient>
    </defs>
    <path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="url(#orange_red)" stroke-width="10" transform="translate(5,5)"></path>
</svg>

• 把fill="url(#orange_red)"就成了漸變填充，若是把stroke="url(#orange_red)"描邊漸變填充了；效果圖以下：

<svg width="100%" height="100%">
    <path d="M0,40 H240" stroke="#333" stroke-width="10"></path>
    //畫筆移動到0,40 畫水平線到240，垂直線反之
</svg>

• H：水平直線，既保持Y座標不變
• V：垂直直線，既保持X座標不變

<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>

• stroke-linecap：butt | round | square；如圖：

若是是虛線：

<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的三次貝塞爾曲線使用方法！

線性代數：

解決svg線條粗細不一

svg line {
    shape-rendering: crispEdges;
}