SVG定義路徑的path標籤入門詳細教程
SVG的<path>元素用於定義一些複雜的圖形。它可以結合使用直線，曲線等來製作各種不規則的圖形。<path>元素是SVG基本圖形中最為複雜的一個。要掌握和理解它也需要下一點苦工。
先來看一個例子：
<svg xmlns="http://www.w3.org/2000/svg"> <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,110 L100,0" style="stroke:#660000; fill:none;"/> </svg>
上面程式碼的返回結果如下：
可以看到SVG影象中包含一條曲線和倆條直線，並且第二條直線是立刻第一條直線一段距離的。
所有的這些繪製工作都是在<path>元素中通過d屬性來完成的。<d>屬性包含了一些用於繪製的命令。在上面的例子中，M命令代表“Move to”（移動到）的意思。A命令代表一個“arc”（弧線）。L命令代表“Line”（直線）。這些命令都由一支“虛擬的畫筆”來執行，這支筆可以移動和繪製圖形。
設定和移動虛擬畫筆
在<path>元素的d屬性中的第一個命令總是一個移動命令。在你繪製圖形之前你必須移動虛擬畫筆到某個位置上。移動畫筆通過M指令來完成。看下面的例子：
<svg xmlns="http://www.w3.org/2000/svg"> <path d="M50,50" style="stroke:#660000; fill:none;"/> </svg>
上面的例子將虛擬畫筆移動到(50,50)座標的位置上。然後接下來的繪製命令將從這個位置開始繪製圖形。
直線
直線命令是<path>元素最簡單的命令。繪製直線使用L或l指令。下面是一個例子：
<svg xmlns="http://www.w3.org/2000/svg"> <path d="M50,50 L100,100" style="stroke:#660000; fill:none;"/> </svg>
上面的例子從（50,50）座標開始繪製一條直線，直線的終點在（100,100）的位置。下面是返回結果：
直線命令L和l有什麼區別呢？大小的L指令繪製一條直線到一個絕度位置的點，而小寫的l指令繪製一條直線到一個相對位置的點。相對位置的點是指從虛擬畫筆開始繪製的點的座標加上由l指令給出的座標。看不懂？沒關係，我們來舉個例子：假如虛擬畫筆開始繪製的位置是（50,50），l指令給出的座標是(100,100)，那麼直線將從(50,50)位置開始繪製，繪製到(50+100,50+100)的位置。如果使用的是L100,100指令，那麼就是從(50,50)位置開始繪製直線，繪製到(100,100)的位置。
路徑圖形總是從虛擬畫筆的最後位置開始到新的座標點繪製圖形。每一個繪製命令都有一個結束點。在執行了這些繪製命令後，虛擬畫筆會定位在這些命令所決定的結束點上。下一次的繪製命令將從這些點開始繪製。
弧線
使用<path>元素來繪製弧線使用A或a指令。大小和小寫指令的意義與直線命令相同。看下面的例子：
<svg xmlns="http://www.w3.org/2000/svg"> <path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/> </svg>
上面程式碼的返回結果如下：
這個例子從（50,50）開始繪製弧線，結束點位置在（100,100）。
弧線的半徑有A指令的兩個數值決定。第一個引數是rx，水平方向上的半徑，第二個引數是ry，垂直方向上的半徑。如果rx和ry設定為相同的值，那麼將得到一個圓形的弧線。rx和ry設定為不同的值將得到一個橢圓形的弧線。上面的例子中，rx的值為30，ry的值為50。
A指令上的第三個引數是x-axis-rotation。這個引數用於設定弧線X軸方向上的旋轉。通常不需要改變這個引數，它的預設值為0。
第四和第五個引數分別為large-arc-flag和sweep-flag。它們是兩個標誌位。我們知道，從A點到B點繪製一條弧線，可以得到兩條不同的弧線。一條較大，另一條較小。large-arc-flag就是用於決定到底是繪製較大的那一條弧線還是繪製較小的那一條弧線。
下面來看一個例子，下面繪製4條相同的弧線，分別使用不同的large-arc-flag和sweep-flag值：
<svg xmlns="http://www.w3.org/2000/svg"> <path d="M40,20A30,30 0 0,0 70,70" style="stroke: #cccc00; stroke-width:2; fill:none;"/> <path d="M40,20A30,30 0 1,0 70,70" style="stroke: #ff0000; stroke-width:2; fill:none;"/> <path d="M40,20A30,30 0 1,1 70,70" style="stroke: #00ff00; stroke-width:2; fill:none;"/> <path d="M40,20A30,30 0 0,1 70,70" style="stroke: #0000ff; stroke-width:2; fill:none;"/> </svg>
先來看看結果：
4條不同的弧線都是從(40,20)繪製到(60,70)。它們的rx和ry值相等，因此是一個正圓圓弧。這4條弧線分別為一條長弧線，一條短弧線，還有兩條是前面兩條弧線的映象。large-arc-flag屬性決定是繪製長弧線還是短弧線。sweep-flag決定是否沿開始點到結束點的直線來映象弧線。實際上，sweep-flag是控制弧線的繪製方向，順時針或逆時針繪製弧線，得到的結果是一種“映象”效果。
上面的程式碼繪製的第一條弧線是一條黃色的弧線。它的large-arc-flag屬性設定為0，這意味著較小的弧線將被繪製。sweep-flag也被設定為0，這意味著不映象弧線。黃色弧線的返回結果如下：
第二條被繪製的弧線是紅色的弧線。它的large-arc-flag屬性設定為1，這意味著較大的弧線將被繪製。sweep-flag屬性設定為0，這意味著不映象弧線。紅色弧線的返回結果如下：
第三條被繪製的弧線是綠色的弧線。它是紅色的弧線的一個映象（沿弧線的開始點和結束點形成的直線做映象）。可以看到它的sweep-flag屬性被置為1。
第四條弧線是藍色的弧線，它是黃色弧線的映象，原因是它的sweep-flag屬性被置為1。
貝茲曲線
使用<path>元素也可以繪製二次貝茲曲線。繪製二次貝茲曲線使用Q或q命令。大小寫版本的Q命令和直線的原理相同。大小版本的指令代表結束點位於絕對座標系中。小寫版本的的指令代表結束點位於相對座標系中（相對於開始點）。下面是一個二次貝茲曲線的例子：
<path d="M50,50 Q50,100 100,100" style="stroke: #006666; fill:none;"/>
它的返回結果如下：
上面的例子從（50,50）開始到（100,100）位置結束繪製一條二次貝茲曲線，控制點的位置在（50,100）的位置。控制點是由Q指令設定的兩個引數。
如果你使用過一些向量影象編輯軟體，如Adobe Illustrator，那麼你就會了解什麼是貝茲曲線和控制點。在一個向量圖上的某個點，我們可以看到這個點上有兩個控制手柄，通過拖拽這兩個手柄可以調節這一點的弧度的大小。
控制點能夠像磁鐵一樣拉伸曲線。控制點越接近弧線，弧線越平滑。控制點月遠離弧線，弧線越被拉伸。下面是幾個不同位置控制點的例子：
實際上，如果你從開始點繪製一條直線到控制點，在從控制點繪製一條直線到結束點，然後將這兩條直線的中心點相連，那麼這條連線正好和這條弧線相切。如下面的影象所示：
三次貝茲曲線
繪製三次貝茲曲線的命令是C和c。三次貝茲曲線和二次貝茲曲線相同，但是它有兩個控制點。大寫的命令的結束點使用絕對座標系，小寫的命令的結束點使用的是相對座標系（相對於開始點）。下面是一個三次貝茲曲線的例子：
<pathd="M50,50 C75,80 125,20 150,50" style="stroke: #006666; fill:none;"/>
下面是它的返回結果，另外還繪製了它的兩個控制點。
你可以使用三次貝茲曲線來繪製一些複雜的曲線。下面是一些例子：
閉合路徑
<path>元素有一個閉合路徑的快捷命令。閉合路徑是指從最後一個繪製點連線到開始點。這個命令是Z（或z，這裡大小寫沒有區別）。下面是一個例子：
<pathd="M50,50 L100,50 L100,100 Z" style="stroke: #006666; fill:none;"/>
下面是上面程式碼的返回結果：
結合使用各種命令
我們可以在<path>中集合使用各種繪製命令。下面是一個例子：
<pathd="M100,100 L150,100 a50,25 0 0,0 150,100 q50,-50 70,-170 Z" style="stroke: #006666; fill: none;"/>
上面的程式碼繪製了一條直線，一條弧線和一條二次貝茲曲線，並且最後使用Z指令來閉合路徑。得到的結果如下：
填充路徑
我們可以使用CSS的fill屬性來填充路徑。看下面的例子：
<path d="M100,100 L150,100 L150,150Z" style="stroke: #0000cc; stroke-width: 2px; fill: #ccccff;"/>
上面程式碼得到的結果如下：
重複指令的簡寫方式
如果你重複多次連續使用同一個命令，可以可以將其省略，只寫後面的引數即可。例如下面的例子：
<path d="M10,10 l100,0 0,50 -100,0 0,-50" style="stroke: #000000; fill:none;"/>
在上面的例子中，多次連續使用了l指令來繪製直線，除了第一個l指令外，其他的都可以省略。得到的結果如下面所示：
PATH命令
在下面列出了SVG <path>元素的虛擬畫筆可以使用的命令。大小的指令通常將引數座標解析為絕對座標。小寫的指令通常將引數座標解析為相對座標。
| 指令 | 引數 | 名稱 | 描述 |
| M | x,y | moveto | 移動虛擬畫筆到指定的（x,y）座標，僅移動不繪製 |
| m | x,y | moveto | 移動虛擬畫筆到指定的（x,y）座標，這個座標是相對於當前畫筆的座標，僅移動不繪製 |
| L | x,y | lineto | 從當前畫筆所在位置繪製一條直線到指定的（x,y）座標 |
| l | x,y | lineto | 從當前畫筆所在位置繪製一條直線到指定的（x,y）座標，(x,y)座標是相對於花瓣位置的點 |
| H | x | horizontal lineto | 繪製一條水平直線到引數指定的x座標點，y座標為畫筆的y座標 |
| h | x | horizontal lineto | 繪製一條水平直線到引數指定的x座標點（當前x + 指定的x），x座標相對於當前畫筆x座標 |
| V | y | vertical lineto | 從當前位置繪製一條垂直直線到引數指定的y座標 |
| v | y | horizontal lineto | 從當前位置繪製一條垂直直線到引數指定的y座標，y座標相對於當前畫筆的y座標 |
| C | x1,y1 x2,y2 x,y | curveto | 從當前畫筆位置繪製一條三次貝茲曲線到引數（x,y）指定的座標。x1，y1和x2,y2是曲線的開始和結束控制點，用於控制曲線的弧度 |
| c | x1,y1 x2,y2 x,y | curveto | 於大小C指令相同，但是座標是相對於畫筆的座標 |
| S | x2,y2 x,y | shorthand / smooth curveto | 從當前畫筆位置繪製一條三次貝茲曲線到引數（x,y）指定的座標。x2,y2是結束控制點。開始控制點和前一條曲線的結束控制點相同 |
| s | x2,y2 x,y | shorthand / smooth curveto | 和大小的S指令相同，但是座標是相對於當前畫筆的座標點 |
| Q | x1,y1 x,y | 二次貝茲曲線 | 從當前畫筆位置繪製一條二次貝茲曲線到引數（x,y）指定的座標。x1,y1是控制點，用於控制曲線的弧度 |
| q | x1,y1 x,y | 二次貝茲曲線 | 和大小的Q指令相同，但是座標是相對於當前畫筆的座標點 |
| T | x,y | 平滑的二次貝茲曲線 | 從當前畫筆位置繪製一條二次貝茲曲線到引數（x,y）指定的座標。控制點被假定為最後一次使用的控制點 |
| t | x,y | 平滑的二次貝茲曲線 | 和大小的T指令相同，但是座標是相對於當前畫筆的座標點 |
| A | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 橢圓弧線 | 從當前畫筆位置開始繪製一條橢圓弧線到（x,y）指定的座標。rx和ry分別為橢圓弧線水平和垂直方向上的半徑。x-axis-rotation指定弧線繞x軸旋轉的度數。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧標誌位，取值0或1，用於決定繪製大弧還是小弧。sweep-flag用於決定弧線繪製的方向 |
| a | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 橢圓弧線 | 和大寫的A指令相同，但是座標是相對於當前畫筆的座標點 |
| Z | 無 | 閉合路徑 | 從結束點繪製一條直線到開始點，閉合路徑 |
| z | 無 | 閉合路徑 | 從結束點繪製一條直線到開始點，閉合路徑 |
| 指令 | 引數 | 名稱 | 描述 |
|---|---|---|---|
| M | x,y |
moveto 移動到 |
移動虛擬畫筆到指定的（x,y）座標，僅移動不繪製 |
| m | x,y | moveto | 同M，但使用相對座標 |
| L | x,y |
lineto 連直線到 |
從當前畫筆所在位置繪製一條直線到指定的（x,y）座標 |
| l | x,y | lineto | 同L，但使用相對座標 |
| H | x |
horizontal lineto 水平連線到 |
繪製一條水平直線到引數指定的x座標點，y座標為畫筆的y座標 |
| h | x | horizontal lineto | 同H，但使用相對座標 |
| V | y |
vertical lineto 垂直連線到 |
從當前位置繪製一條垂直直線到引數指定的y座標 |
| v | y | vertical lineto | 同V，但使用相對座標 |
| C | x1,y1 x2,y2 x,y |
curveto 三次方貝塞爾曲線 |
從當前畫筆位置繪製一條三次貝茲曲線到引數（x,y）指定的座標。x1，y1和x2,y2是曲線的開始和結束控制點，用於控制曲線的弧度 |
| c | x1,y1 x2,y2 x,y | curveto | 同C，但使用相對座標 |
| S | x2,y2 x,y | shorthand / 平滑三次方貝塞爾曲線 | 從當前畫筆位置繪製一條三次貝塞爾曲線到引數（x,y）指定的座標。x2,y2是結束控制點。開始控制點和前一條曲線的結束控制點相同 |
| s | x2,y2 x,y | shorthand / 平滑三次方貝塞爾曲線 | 同S，但使用相對座標 |
| Q | x1,y1 x,y | 二次方貝塞爾曲線 | 從當前畫筆位置繪製一條二次方貝塞爾曲線到引數（x,y）指定的座標。x1,y1是控制點，用於控制曲線的弧度 |
| q | x1,y1 x,y | 二次方貝塞爾曲線 | 同Q，但使用相對座標 |
| T | x,y | 平滑的二次貝塞爾曲線 | 從當前畫筆位置繪製一條二次貝塞爾曲線到引數（x,y）指定的座標。控制點被假定為最後一次使用的控制點 |
| t | x,y | 平滑的二次貝塞爾曲線 | 同T，但使用相對座標 |
| A | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 橢圓弧線 | 從當前畫筆位置開始繪製一條橢圓弧線到（x,y）指定的座標。rx和ry分別為橢圓弧線水平和垂直方向上的半徑。x-axis-rotation指定弧線繞x軸旋轉的度數。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧標誌位，取值0或1，用於決定繪製大弧還是小弧。sweep-flag用於決定弧線繪製的方向 |
| a | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 橢圓弧線 | 同A，但使用相對座標 |
| Z | 無 | 閉合路徑 | 從結束點繪製一條直線到開始點，閉合路徑 |
| z | 無 | 閉合路徑 | 同Z |
注意:所有的這些字元命令都可以用大小寫兩種形式。大小表示絕對位置，而小寫表示相對位置。
轉自：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506142036.html