svg之詳解

path元素的形狀是經過屬性d定義的，屬性d的值是一個「命令+參數」的序列。

每個命令都用一個關鍵字母來表示，每個命令都有兩種表示方式。
一種是用**大寫字母**，表示採用**絕對定位**。
另外一種是用**小寫字母**，表示採用**相對定位**
（例如：從上一個點開始，向上移動10px，向左移動7px）

由於屬性d採用的是用戶座標系統，因此不需標明單位。

接下來，來看一下各個命令

直線命令

M

【Move to】須要兩個參數，分別是須要移動到的點的x軸和y軸的座標。相似於移動畫筆的位置。

M x y //絕對位置
m dx dy //相對位置。後續提到其餘命令雷同，故省略再也不贅述。

L

【Line to】須要兩個參數，分別是一個點的x軸和y軸座標，L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。

H 【繪製平行線】

V 【繪製垂直線】

這兩個命令都只帶一個參數，標明在x軸或y軸移動到的位置，由於它們都只在座標軸的一個方向上移動

Z 【閉合路徑】

Z命令會從當前點畫一條直線到路徑的起點。不區分大小寫

看一下MDN中給的例子：畫的是一個矩形。

<?xml version="1.0" standalone="no"?>
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
   <!-- 利用Z命令，效果與上一句相同 -->
  <path d="M10 10 H 90 V 90 H 10 Z"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>
</svg>

效果圖以下：

曲線命令

C

三次貝塞爾曲線。(x,y)表示的是曲線的終點，(x1,y1)是起點的控制點，(x2,y2)是終點的控制點。
控制點描述的是曲線起始點的斜率，曲線上各個點的斜率，是從起點斜率到終點斜率的漸變過程。

C x1 y1, x2 y2, x y

有點抽象，能夠看一下例子。（建議本身拍一下代碼看看效果）

<?xml version="1.0" standalone="no"?>

<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"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>

S

當一個點某一側的控制點是它另外一側的控制點的對稱（以保持斜率不變），可使用S命令。簡寫的貝塞爾曲線命令。
若是S命令跟在一個C命令或者另外一個S命令的後面，它的第一個控制點，就會被假設成前一個控制點的對稱點。若是S命令單獨使用，前面沒有C命令或者另外一個S命令，那麼它的兩個控制點就會被假設爲同一個點。

S x2 y2, x y

繼續扔一個栗子來看看。【注意】藍色部分是對稱的控制點

<?xml version="1.0" standalone="no"?>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

Q

二次貝塞爾曲線Q，只須要一個控制點，用來肯定起點和終點的曲線斜率。所以它須要兩組參數，控制點和終點座標。

Q x1 y1, x y

看一下例子，（代碼中表示點的位置沒寫。）

<?xml version="1.0" standalone="no"?>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

效果圖，path是黑色曲線

T

與S命令類似，是Q命令的簡寫命令。
與S命令類似，T也會經過前一個控制點，推斷出一個新的控制點。這意味着，在你的第一個控制點後面，能夠只定義終點，就建立出一個至關複雜的曲線。

【須要注意】，T命令前面必須是一個Q命令，或者是另外一個T命令，才能達到這種效果。若是T單獨使用，那麼控制點就會被認爲和終點是同一個點，因此畫出來的將是一條直線。

T x y

仍是看例子比較清楚。

<?xml version="1.0" standalone="no"?>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

效果圖以下：【注意藍色部分是自動補全對稱的】

參考：路徑-SVG|MDN
也能夠看看張鑫旭的博客