SVG/path

出自六年制學程
在2017年11月20日 (一) 16:07由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋
  • 語法說明
  • 參數大寫代表絕對座標,小寫代表與前一個座標的相對座標
  • 點與點之間、同點的 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'/>
關閉路徑,將目前點的座標與第一個點的座標連接起來