檢視 SVG/path 的原始碼

*[http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html 語法說明]
*參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
*點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
<table class=nicetable>
<tr>
	<th style='width:12%;background:#ddd;' colspan=2>指令</th>
	<th style='width:7%;background:#ddd;'>參數</th>
	<th style='width:33%;background:#ddd;'>示例</th>
	<th style='width:48%;background:#ddd;'>指令說明</th>
</tr>
<tr>
	<td colspan=2>M(move to)</td>
	<td>x y</td>
	<td style='font-size:90%'>&lt;path d='M0 0' style='stroke:black'/&gt;</td>
	<td>起始點的 x , y 座標</td>
</tr>
<tr>
	<th style='width:2%;' rowspan=3>線</th>
	<td>H(horizontal line to)</td>
	<td>x</td>
	<td style='font-size:90%'>&lt;path d='M0 0 H50' style='stroke:black'/&gt;</td>
	<td>從目前點的座標畫水平直線到指定的 x 軸座標</td>
</tr>
<tr>
	<td>V(vertical line to)</td>
	<td>y</td>
	<td style='font-size:90%'>&lt;path d='M0 0 V50' style='stroke:black'/&gt;</td>
	<td>從目前點的座標畫垂直線到指定的 y 軸座標</td>
</tr>
<tr>
	<td>L(line to)</td>
	<td>x y</td>
	<td style='font-size:90%'>&lt;path d='M0 0 L50 50' style='stroke:black'/&gt;</td>
	<td>從目前點的座標畫直線到指定點的 x , y 座標</td>
</tr>
<tr>
	<th style='width:2%;' rowspan=3>二<br/>次</th>
	<td>Q(quadratic Bézier curve)</td>
	<td colspan=2>x1 y1 x y<br/><img src='http://jendo.org/wiki1231/images/a/a8/SvgPathQ.png' width='200px' height='*'/><br/><span style='font-size:90%'>&lt;path d='M0,0 Q50,50 100,0' style='stroke:black'/&gt;</span></td>
	<td>從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 為控制點</td>
</tr>
<tr>
	<td>T(smooth quadratic Bézier curve)</td>
	<td colspan=2>x y<br/><img src='http://jendo.org/wiki1231/images/4/4a/SvgPathT.png' width='300px' height='*'/><br/><span style='font-size:90%'>&lt;path d='M0,0 Q50,50 100,0 T200,0' style='stroke:black'/&gt;</span></td>
	<td>前方要接上 Q 才能畫，從目前點以前一個 Q 的控制點之鏡射點為控制點，畫二次貝茲曲線到指定點(x,y)。</td>
</tr>
<tr>
	<td>A(Arc)</td>
	<td colspan=2>rx ry x-axis-rotation large-arc-flag sweep-flag x y</td>
	<td>從目前點的座標畫個橢圓形到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向</td>
</tr>
<tr>
	<th style='width:2%;' rowspan=2>三<br/>次</th>
	<td>C(curve)</td>
	<td colspan=2>x1 y1 x2 y2 x y<br/><img src='http://jendo.org/wiki1231/images/0/08/SvgPathC.png' width='200px' height='*'/><br/><span style='font-size:90%'>&lt;path d='M0,0 C40,40 60,40 100,0' style='stroke:black'/&gt;</span></td>
	<td>從目前點的座標畫條三次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 及 x2, y2 為控制點</td>
</tr>
<tr>
	<td>S(smooth curve)</td>
	<td colspan=2>x2 y2 x y<br/><img src='http://jendo.org/wiki1231/images/1/1b/SvgPathS.png' width='300px' height='*'/><br/><span style='font-size:90%'>&lt;path d='M0,0 C40,40 60,40 100,0 S150,-40 200,0' style='stroke:black'/&gt;</span></td>
	<td>在目前點之前必須有一個貝茲控制點，在目前點之後會以同樣的斜率鏡射一個貝茲控制點，再由參數(x2,y2)補上第二個貝茲控制點，再從目前點經兩個貝茲控制點畫貝茲曲線到指定點(x,y)。</td>
</tr>
<tr>
	<td colspan=2>Z(closepath)</td>
	<td colspan=2><img src='http://jendo.org/wiki1231/images/0/09/SvgPathTZ.png' width='300px' height='*'/><br/><span style='font-size:86%'>&lt;path d='M0,0 Q50,50 100,0 T200,0 Z' style='stroke:black'/&gt;</span></td>
	<td>關閉路徑，將目前點的座標與第一個點的座標連接起來</td>
</tr>
</table>