本節我們學習 SVG 中路徑，在 SVG 中我們可以使用 <path> 元素來定義路徑。<path> 的功能很強大，既可以創建基本的圖形，也可以創建更復雜的形狀。<path> 路徑是由一些命令來控制的，每個命令對應一個字母，字母區分大小寫。
SVG中的path命令
<path> 元素可以用於定義路徑，元素中有一個 d 屬性，這個 d 屬性是一系列命令的集合。
<path> 元素中支持下列命令，如果是大寫命令表示絕對定位，小寫則表示相對定位：
| 命令 | 參數 | 描述 |
|---|---|---|
| M | x y | 移動畫筆到給定座標，即起始點 |
| L | x y | 繪製一條到給定座標的線，可提供多組座標繪製折線 |
| H | x y | 繪製一條到 x 座標的橫線 |
| V | y | 繪製一條到 y 座標的豎線 |
| C | x yx1 y1 x2 y2 | 繪製一條從當前點到（x,y）的三次貝塞爾曲線，（x1,y1）爲曲線的開始控制點，（x2,y2）爲曲線的終點控制點 |
| S | x y x1 y1 | 繪製一條從當前點到（x,y）的三次貝塞爾曲線，（x1,y1）爲新端點的控制點 |
| Q | x y x1 y1 | 繪製一條從當前點到（x,y），控制點爲（x1,y1）的二次貝塞爾曲線 |
| T | x y | 繪製一條從當前點到（x,y）的二次貝塞爾曲線 |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 繪製當前點到（x,y）的橢圓弧，橢圓弧的 x，y軸半徑分別爲 rx,ry。橢圓相對於 x 軸旋轉 x-axis-rotation 度。large-arc-flag 等於0表示弧線小於180度，等於1表示弧線大於180度。sweep-flag 等於0 表示弧線逆時針旋轉，等於1表示弧線順時針選裝 |
| Z | 閉合路徑 |
示例：
例如我們使用路徑命令繪製一個矩形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="500">
<path d="M50 50 L200 50 L200 150 L50 150 Z" style="fill:#f5bf8d;" />
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
其中 M 命令指定了開始點的位置，即左上角 (50,50)，L 命令可以用於繪製一條直線段，這個直線段從當前位置移到指定位置。上述三個 L 位置分別爲右上角 (200,50)、右下角 (200,150)、左下角(50,150)。Z 命令爲閉合路徑命令。
繪製一段弧線
使用 <path> 中的 A 和 a 命令，可以繪製圓弧，使用 A 命令（絕對座標）作爲其端點，a 命令（相對座標） 作爲起點。
示例：
例如下面這個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px" >
<path d="M50,40 A30,50 0 0,1 100,110" fill="transparent" stroke="green"/>
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
從代碼中可以看到，這段弧線的起點爲 (50,40)，終點爲(100, 110)，圓弧的半徑爲 A 命令上的前兩個參數，即 rx 爲30，ry 爲 50。A 命令上的第三個參數爲 x-axis-rotation， 被設置爲了0，第四個 large-arc-flag 的值等於 0 ，這表示弧線小於180度。