SVG-path(一)

昨天介紹了各種基本形狀，今天要來介紹SVG強大的形狀元素<path>

<path>基本概念

• 屬性

• <path>有各種的指令可以使用，只要用很少的點就可以做出平滑的曲線
• 每種指令有兩種表達方式，大寫指令表示絕對定位;小寫指令表示相對定位(相對於上個點)
• 使用最初用戶坐標系統，左上角為(0,0)座標點，座標預設以像素為單位，x軸正方向是向右，y軸正方向是向下

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>

<path>指令

接下來來介紹指令，每個命令都用一個關鍵字代表，大寫指令表示絕對定位;小寫指令表示相對定位

指令 | 意思| 參數 | 說明
------------- | -------------
M/m | moveto | x y | 起始點的(x,y)座標
Z/z | closepath | / |封閉路徑，將當前座標跟第一個座標連起來
直線指令 | /| /|/
L/l | lineto | x y | 從當前座標畫直線到路徑終點的(x,y)座標
H/h | horizontal lineto| x | 從當前座標畫水平線到路徑終指定的x軸座標
V/v | vertical lineto| y | 從當前座標畫垂直線到路徑終指定的y軸座標
曲線指令 | / | /|/
C/c | curveto| x1 y1 x2 y2 x y | 從當前座標畫曲線到曲線終點的(x,y)座標，(x1,y1)及(x2,y2)為控制點
S/s | smooth curveto | x2 y2 x y |從當前座標畫反射曲線到曲線終點的(x,y)座標，(x2,y2)為反射控制點
Q/q | quadratic Bézier curve| x1 y1 x y | 從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標，(x1,y1)為控制點
T/t | smooth quadratic Bézier curveto | x y |從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標，前一個座標為反射控制點
弧形指令 | / | /|/
A/a | elliptical Arc | rx ry x-axis-rotation large-arc-flag sweep-flag x y |從當前座標畫弧形到指定的(x,y)座標，rx=橢圓形的x軸半徑 ry=橢圓形的y軸半徑，x-axis-rotation=弧線與x軸的旋轉角度，large-arc-flag:(1=最大角度的弧線;0=最小角度的弧線)，sweep-flag:方向(1=順時針方向;0=逆時針方向)

[補充]

在SVG中，值不一定要具有單位。沒有單位的值，就會在用戶座標系中使用用戶單位，預設就會使用px為其單位。(SVG座標系統)
也可以使用其他單位。SVG支援的單位還包含em、ex、px、pt、pc、cm、mm、in和百分比。

明天會詳細介紹各指令，而複雜的A指令會再另外介紹一篇～
今天是漫長的一天，希望能不中斷繼續寫下去～

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

參考來源：
[1]https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
[2]https://www.w3schools.com/graphics/svg_path.asp
[3]https://www.oxxostudio.tw/articles/201410/svg-tutorial.html
[4]https://andyyou.github.io/2017/03/17/svg-coordinate-1/