SVG/path:修訂版本之間的差異
出自六年制學程
第 30 行: | 第 30 行: | ||
<td style='font-size:70%'><path d='M0 0 L50 50' style='stroke:black'/></td> | <td style='font-size:70%'><path d='M0 0 L50 50' style='stroke:black'/></td> | ||
<td>從目前點的座標畫直線到指定點的 x , y 座標</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/><path d='M0,0 Q50,50 100,0' style='stroke:black'/></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='200px' height='*'/><br/><path d='M0,0 Q50,50 100,0 T200,0' style='stroke:black'/></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> | ||
</table> | </table> |
2017年11月20日 (一) 14:44的修訂版本
指令 | 參數 | 示例 | 指令說明 | |
---|---|---|---|---|
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 逆時針方向 |