iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0

<path>指令

  • 接下來詳細介紹指令,每個命令都用一個關鍵字代表
  • 大寫指令表示絕對定位;小寫指令表示相對定位
  • 參數部分,空白分隔的為一組,逗號則是有兩組以上,將組做分隔

M/m:路徑起始點

指令 意思 參數 說明
M/m moveto x y 路徑起始點的(x,y)座標
<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100"/>
</svg>

如下圖,因為只有一個點,正常為看不到東西,圖為示意圖,代表點的位置
https://ithelp.ithome.com.tw/upload/images/20181103/20111500PRViyAvadB.jpg

Z/z:封閉路徑

指令 意思 參數 說明
Z/z closepath 加上Z即將路徑變為封閉路徑,將當前座標跟第一個座標連起來

直線指令

L/l:直線

指令 意思 參數 說明
L/l lineto x y 從當前座標畫直線到路徑終點的(x,y)座標
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  L200 200" stroke="black"/>
</svg>

如下圖,路徑拉直線到了座標(200,200)
https://ithelp.ithome.com.tw/upload/images/20181103/20111500qvQFWv23Xm.jpg

H/h:水平直線

指令 意思 參數 說明
H/h horizontal lineto x 從當前座標畫水平線到路徑終指定的x軸座標
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  H200" stroke="black"/>
</svg>

如下圖,只有x座標移動到x=200的位置,y軸維持y=100
https://ithelp.ithome.com.tw/upload/images/20181103/20111500KXuqrXOdV4.jpg

V/v:垂直直線

指令 意思 參數 說明
V/v vertical lineto y 從當前座標畫垂直線到路徑終指定的y軸座標
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  V200" stroke="black"/>
</svg>

如下圖,只有y座標移動到y=200的位置,x軸維持x=100
https://ithelp.ithome.com.tw/upload/images/20181103/20111500oCFVTSyAkf.jpg

曲線指令

C/C:曲線

指令 意思 參數 說明
C/c curveto x1 y1 x2 y2 x y 從當前座標畫曲線到曲線終點的(x,y)座標,(x1,y1)及(x2,y2)為控制點
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  C120 150,200 150, 200 200" stroke="black" fill="transparent"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181103/20111500J2JkzeMVG1.jpg

S/s:反射曲線

指令 意思 參數 說明
S/s smooth curveto x2 y2 x y 從當前座標畫反射曲線到曲線終點的(x,y)座標,(x2,y2)為反射控制點
  • 如單獨S指令,兩個控制點就會為同一個點
  • 如S指令前接著C指令,它的第一個控制點就會被假設成前一個控制點的對稱點,即會以和前一控制點同一斜率產生一個虛擬的反射點
<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  C120 150,200 150, 300 200 S450 -150, 500 100" stroke="black" fill="transparent"/>
</svg>
<!-- 僅為示意程式碼,跟下方圖片呈現曲線不相同 -->

https://ithelp.ithome.com.tw/upload/images/20181103/20111500LFrTE9fUfw.jpg

Q/q:二次貝茲曲線

指令 意思 參數 說明
Q/q quadratic Bézier curve x1 y1 x y 從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標,(x1,y1)為控制點

Q較前兩個曲線指令簡單許多,只用一個控制點來控制曲線的斜率

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  Q150 150 ,200 100" stroke="black" fill="transparent"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181103/20111500gh9EcfVTd4.jpg

T/t:二次反射貝茲曲線

指令 意思 參數 說明
T/t smooth quadratic Bézier curveto x y 從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標,前一個座標為反射控制點

與S指令類似,控制點為前一個控制點的反射點(同一斜率)

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  Q150 150 ,200 100 T300 100" stroke="black" fill="transparent"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181103/20111500V0x4tVvHhg.jpg
[補充]
控制點類似Illustor的把手當前座標終點座標類似Illustor的錨點,而QT指令的控制點類似Illustor按alt+把手(閉合錨點控制)
https://ithelp.ithome.com.tw/upload/images/20181103/20111500zvJECCznmS.png

~SVG龜速學習中,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
[2]https://www.oxxostudio.tw/articles/201406/svg-04-path-1.html


上一篇
SVG-path(一)概念
下一篇
SVG-path(三)弧形指令:A
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言