前言
如果沒看過上一篇文章，可以點選連結前往觀看，循序漸進，體驗更佳
在進入正題前，先溫習一下
svg的座標系，x軸為水平向右，y軸為垂直向下
在前一篇文章中，我們已經瞭解了d屬性的M、L、H、V、A命令，接下來，將繼續瞭解剩下命令
d屬性詳解
主要定義了路徑的路徑資料，由描述路徑的一系列命令資料組成
命令資料主要由命令及命令引數組成，多個命令引數之間可用空格或逗號(英文逗號)隔開
Q
該命令用於畫二次貝塞爾曲線
Q | q後可跟4個引數：
x1：控制點橫座標位置y1：控制點縱座標位置x：終點橫座標位置y：終點縱座標位置
四個引數兩兩一組，表示兩組座標，分別表示控制點座標和終點座標
一條二次貝塞爾曲線其實就是由起點、控制點和終點三點經過某種規律運算決定的，其中，起點由上一次繪製的結束點決定
其數學公式為：\(B(t)=(1-t)^2P\alpha +2t(1-t)P\beta +t^2P\gamma ，t\in [0,1]\)
本質上，是一系列點的集合
如下是一條二次貝塞爾曲線的繪製過程動畫：
接下來提取其中一幀進行標註分析，如下
一條貝塞爾曲線由如圖所示的一系列目標點Bt組成
目標點Bt又由Qa和Qb兩點決定，其為兩點連線的$\frac{t}{1} \(**處的點，其中**\)t\in [0,1]$
Qa由起點與控制點決定，Qb由控制點與終點決定，均為兩點連線的$\frac{t}{1} $處的點
故可總結得，貝塞爾曲線的繪製過程為：
-
在\(t\in [0,1]\)中，每次取相鄰兩點連線的\(\frac{t}{1}\)處作為新的控制點
-
得出的新控制點繼續取相鄰兩點連線的\(\frac{t}{1}\)處作為接下來的新控制點
-
以此遞迴，最終得出唯一的一個新控制點，即為組成貝塞爾曲線的點
起點與終點不之間不需要連線計算
該流程也適用於高階貝塞爾曲線
用二次貝塞爾曲線論證，三個點經過一次運算即可得出兩個新控制點，用新控制點再進行一次運算即可得出唯一的控制點，算出每個\(t\in [0,1]\)下唯一的控制點，其集合成的線即為二階貝塞爾曲線
當然，以上只是為了幫助認識貝塞爾曲線的生成過程，知其然，也知其所以然，如不想了解也是可以正常使用貝塞爾曲線的
言歸正傳，以下給出幾條命令的示例：
<path M100 450 Q300 150 500 450 /><path M100 450 Q240 200 500 450 />
如想知道命令長啥樣，可自行在svg檔案內執行檢視
T
該命令用於畫平滑二次貝塞爾曲線
T | t後可跟2個引數：
x：終點橫座標位置y：終點縱座標位置
其實，該命令本質上也是用於畫二次貝塞爾曲線，可以算是
Q命令的簡化版只需要一個終點座標即可生成曲線，但其實際上依舊由起點、控制點和終點三點生成，其中，控制點由上一次繪製的控制點關於其終點中心對稱生成
故，
T命令只能接在Q或T命令後使用，如單獨出現或接於其它命令後出現，控制點會與其起點一致，繪製的效果會是一條直線
上圖是一條曲線路徑的示例圖，由一次Q和兩次T命令組成，其中T命令只需給出終點座標即可，控制點2由控制點1繞終點1中心對稱生成，控制點3由控制點2繞終點2中心對稱生成
例：<path d="M50 300 Q 160 180 240 270 T400 370 T500 240" fill="none" stroke="red" />
C
該命令用於畫三次貝塞爾曲線
C | c後可跟6個引數：
x1：控制點1橫座標位置y1：控制點1縱座標位置x2：控制點2橫座標位置y2：控制點2縱座標位置x：終點橫座標位置y：終點縱座標位置
三次貝塞爾曲線比二次貝塞爾曲線多一個控制點控制，故有
6個引數即其由起點、控制點1、控制點2和終點決定生成，生成方式與上方二次貝塞爾曲線講的方式類似
數學公式為：\(B(t)=(1-t)^3P\alpha +3t(1-t)^2P\beta +3t^2(1-t)P\gamma +t^3P\delta ，t\in [0,1]\)
以下是一條普通三次貝塞爾曲線的生成過程動畫：
具體的描述不再贅述
S
該命令用於畫平滑三次貝塞爾曲線
S | s後可跟4個引數：
x1：控制點2橫座標位置y1：控制點2縱座標位置x：終點橫座標位置y：終點縱座標位置
其為
C命令的簡化版，只需指定一個控制點2和終點座標即可但其本質依舊是畫三次貝塞爾曲線，實際上還是由起點、控制點1、控制點2和終點決定生成，其中，控制點1由上一次繪製的控制點關於其終點中心對稱生成(即根據前一條命令的控制點2關於前一條命令的終點中心對稱決定)
上圖是一條曲線路徑的示例圖，由一次C和兩次S命令組成，其中S命令只需給出控制點2和終點座標即可，控制點b1由控制點a2繞終點a中心對稱生成，控制點c1由控制點b2繞終點b中心對稱生成
例：<path d="M50 300 C 160 180 240 210 300 300 S400 370 500 240 S660 160 700 300" fill="none" stroke="red" />
Z
該命令用於閉合路徑，大小寫字母均可，後面不需跟引數
命令會從當前位置到起點畫一條直線閉合整個path
一般放在d屬性命令資料的最後
名詞解讀
絕對： 指數值針對座標系絕對
相對： 指數值針對上一點相對
對於
d屬性的命令，通常有大寫字母和小寫字母兩種，大寫表絕對，小寫表相對
貝塞爾曲線： 是一種數學曲線，它擁有 靈活、平滑、可編輯 的特點，十分適合描述曲面形狀、處理圖形變形、模擬運動軌跡等場景
