SVG/path：修訂版本之間的差異

2021年8月7日 (六) 23:36的修訂版本

• A以外的語法說明
• A的語法說明
• 點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
• 參數大寫代表絕對座標，小寫代表與前一個座標的相對座標

指令		參數	示例	指令說明
M(move to)		x y	<path d='M0 0' style='stroke:black'/>	起始點的 x , y 座標
線	H(horizontal line to)	x	<path d='M0 0 H50' style='stroke:black'/>	從目前點的座標畫水平直線到指定的 x 軸座標
	V(vertical line to)	y	<path d='M0 0 V50' style='stroke:black'/>	從目前點的座標畫垂直線到指定的 y 軸座標
	L(line to)	x y	<path d='M0 0 L50 50' style='stroke:black'/>	從目前點的座標畫直線到指定點的 x , y 座標
二 次	Q(quadratic Bézier curve)	x1 y1 x y <path d='M0,0 Q50,50 100,0' style='stroke:black'/>		從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 為控制點
	T(smooth quadratic Bézier curve)	x y <path d='M0,0 Q50,50 100,0 T200,0' style='stroke:black'/>		前方要接上 Q 才能畫，從目前點以前一個 Q 的控制點之鏡射點為控制點，畫二次貝茲曲線到指定點(x,y)。
	A(Arc)	rx ry x-axis-rotation large-arc-flag sweep-flag x y		從目前點的座標畫個橢圓形到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向
三 次	C(curve)	x1 y1 x2 y2 x y <path d='M0,0 C40,40 60,40 100,0' style='stroke:black'/>		從目前點的座標畫條三次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 及 x2, y2 為控制點
	S(smooth curve)	x2 y2 x y <path d='M0,0 C40,40 60,40 100,0 S150,-40 200,0' style='stroke:black'/>		在目前點之前必須有一個貝茲控制點，在目前點之後會以同樣的斜率鏡射一個貝茲控制點，再由參數(x2,y2)補上第二個貝茲控制點，再從目前點經兩個貝茲控制點畫貝茲曲線到指定點(x,y)。
Z(closepath)		<path d='M0,0 Q50,50 100,0 T200,0 Z' style='stroke:black'/>		關閉路徑，將目前點的座標與第一個點的座標連接起來

(一)一次圖形(相對表示)

1. 以 m 或 l 連續處理皆可
2. 每一節放一個「下個點」，

<path d='m0,51 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/>

<path d='m0,51 l 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/>

(二)二次圖形(相對表示)

1. 以 q 或 q,t 連續處理皆可
2. q 每一小節放兩個點：「控制點 下個節點」，兩點同座標系，皆參考上個點。
3. q,t 的 t 每一小節放一個點：「下個節點」，控制點省略，為上個節點到下個節點連線，省略的控制點為上一小節控制點的鏡像點。

以 q 表示

<path d='m0,51 q50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0' style='stroke:black;fill:none;'/>

以 q,t 表示

<path d='m0,51 q50,50 100,0 t100,0 100,0 100,0 100,0 100,0' style='stroke:black;fill:none;'/>

(三)三次圖形(相對表示)

1. 以 c 或 c,s 連續處理皆可
2. c 每一小節放三個點：「控制點1 控制點2 下個節點」，三點同座標系，皆參考上個點。
3. c,s 的 s 每一小節放兩個點：「控制點2 下個節點」，控制點1省略，以上個節點到下個節點連線，省略的控制點1為上一小節控制點2對連線的鏡像點。

例一

以 c 表示

<path d='m0,51 c40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0' style='stroke:black;fill:none;'/>

以 c,s 表示

<path d='m0,51 c40,40 60,40 100,0 s60,-40 100,0 60,40 100,0 60,-40 100,0 60,40 100,0 60,-40 100,0' style='stroke:black;fill:none;'/>

例一

<path fill='#f00' d='m 12.7,38.5 c -21.3,-11.2 -14.3,-38.5 9.7,-38.5 30,0 51,38.5 51,38.5 0,0 -21,38.5 -51,38.5 -24,0 -31,-27.4 -9.7,-38.5 z'/>