SVG <path> 路徑

path元素是用來(lái)定義形狀的通用元素。所有的基本形狀都可以用path元素來(lái)創(chuàng)建。SVG <path>元素用于繪制由直線，圓弧，曲線等組合而成的高級(jí)形狀，帶或不帶填充。該 <path>元素可能是所有元素中最先進(jìn)，最通用的SVG形狀。它可能也是最難掌握的元素。

SVG 在線編輯器 -  可在線編輯SVG，根據(jù)SVG可轉(zhuǎn)為源代碼

Path示例

SVG <path> 簡(jiǎn)單示例:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50
             A30,30 0 0,1 35,20
             L100,100
             M110,110
             L100,0"
          style="stroke:#660000; fill:none;"/>    
</svg>

運(yùn)行后結(jié)果如下:

請(qǐng)注意圖像如何包含一條圓弧和兩條直線，以及第二條直線如何沒(méi)有與第一條圓弧和直線連接。

所有帶有<path>元素的繪圖都在d屬性中指定。 d屬性包含繪圖命令。 在上面的實(shí)例中，M表示“Move to”(移動(dòng)到)命令，A表示“Arc”(弧形)命令，L表示“Line”(直線)命令。 這些命令被提供給“虛擬筆”。 這支筆可以移動(dòng)，可以畫形狀等。

設(shè)置和移動(dòng)筆

<path>d屬性中的第一個(gè)繪圖命令應(yīng)該始終是move命令。在你可以畫任何東西之前，你應(yīng)該把虛擬筆移到某個(gè)地方。這是使用M命令完成的。下面是一個(gè)簡(jiǎn)單的實(shí)例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50"
          style="stroke:#660000; fill:none;"/>
</svg>

本示例將虛擬筆移動(dòng)到50,50點(diǎn)。下一個(gè)繪圖命令將從該點(diǎn)開始。

線條

畫一條線可能是您可以給<path>元素的最簡(jiǎn)單的命令。使用L和l（小寫L）命令完成畫線:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50             L100,100"
          style="stroke:#660000; fill:none;"/>
</svg>

本示例從點(diǎn)50,50（M命令的點(diǎn)）到點(diǎn)100,100（L命令的點(diǎn)）畫一條線。 運(yùn)行后圖像效果：

L和l命令之間的區(qū)別在于，大寫版本(L)繪制一條直線到傳遞給命令的絕對(duì)點(diǎn)，而小寫版本(l)版本繪制一條直線到傳遞給命令的相對(duì)點(diǎn)。相對(duì)點(diǎn)是虛擬筆在行開始之前的點(diǎn)，加上給定l命令的坐標(biāo)。
如果虛擬筆位于50，50，并且您使用l100,100命令，則直線將繪制為50+100，50+100=150,150。 而不管虛擬筆的位置如何，使用L100,100命令可以精確地將直線繪制到100,100。

繪圖移動(dòng)虛擬筆

路徑形狀始終從最后一個(gè)虛擬筆點(diǎn)繪制到新的點(diǎn)。 每個(gè)繪圖命令都有一個(gè)終點(diǎn)。 執(zhí)行該命令后，虛擬筆點(diǎn)將位于該繪圖命令的終點(diǎn)。 下一個(gè)繪圖命令將從該點(diǎn)開始。

弧線

使用<path>元素繪制圓弧是使用A和a命令完成的。 與直線類似，大寫命令(A)使用絕對(duì)坐標(biāo)作為其終點(diǎn)，而小寫命令(A)使用相對(duì)坐標(biāo)(相對(duì)于起點(diǎn))。 下面是一個(gè)實(shí)例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <path d="M50,50             A30,50 0 0,1 100,100"
          style="stroke:#660000; fill:none;"/>
</svg>

運(yùn)行后結(jié)果如下:

本示例從點(diǎn)50,50到點(diǎn)100,100（在A命令中最后指定）繪制一條弧。
圓弧的半徑由A命令上設(shè)置的前兩個(gè)參數(shù)設(shè)置。 第一個(gè)參數(shù)是rx(x方向的半徑)，第二個(gè)參數(shù)是ry(y方向的半徑)。 將rx和ry設(shè)置為相同的值將產(chǎn)生圓弧。 將rx和ry設(shè)置為不同的值將產(chǎn)生橢圓弧。 在上面的示例中，rx設(shè)置為30，ry設(shè)置為50。
在A命令上設(shè)置的第三個(gè)參數(shù)是x軸旋轉(zhuǎn)(x-axis-rotation)。 與正常的x軸相比，這將設(shè)置圓弧的x軸的旋轉(zhuǎn)。 在上面的示例中，x軸旋轉(zhuǎn)設(shè)置為0。大多數(shù)情況下，您無(wú)需更改此參數(shù)。

第四和第五個(gè)參數(shù)是大圓弧標(biāo)志(large-arc-flag)和掃描標(biāo)志(sweep-flag)參數(shù)。大圓弧標(biāo)志(large-arc-flag)決定是繪制滿足起點(diǎn)、終點(diǎn)和rx和ry的較小或較大的圓弧。下面是一個(gè)繪制4個(gè)圓弧的示例，每個(gè)圓弧具有大圓弧標(biāo)志(large-arc-flag)和掃描標(biāo)志(sweep-flag)的不同組合：

<svg width="500" height="120">
    <path d="M40,20     A30,30 0 0,0 60,70" style="stroke: #cccc00; stroke-width:2; fill:none;"></path>

    <path d="M40,20     A30,30 0 1,0 60,70" style="stroke: #ff0000; stroke-width:2; fill:none;"></path>

    <path d="M40,20     A30,30 0 1,1 60,70" style="stroke: #00ff00; stroke-width:2; fill:none;"></path>

    <path d="M40,20     A30,30 0 0,1 60,70" style="stroke: #0000ff; stroke-width:2; fill:none;"></path>

</svg>

運(yùn)行后結(jié)果如下:

可以從40,20到點(diǎn)60,70繪制四個(gè)不同的弧。 一個(gè)長(zhǎng)弧，一個(gè)小弧以及每個(gè)小/大弧的兩個(gè)鏡像版本。 大弧標(biāo)記確定要繪制大弧還是小弧。 掃描標(biāo)志確定弧是否圍繞從起點(diǎn)到終點(diǎn)的軸鏡像。 實(shí)際上，掃描標(biāo)志控制弧的繪制方向（順時(shí)針或逆時(shí)針），從而產(chǎn)生“鏡像”效果。

繪制的第一個(gè)圓弧是黃色圓弧。 將大圓弧標(biāo)志設(shè)置為0意味著將繪制較小的可能圓弧。 掃描標(biāo)志也被設(shè)置為0，這意味著圓弧不會(huì)鏡像。 下面是黃色弧線：

繪制的第二個(gè)圓弧是紅色圓弧。 將大圓弧標(biāo)志設(shè)置為1意味著繪制兩個(gè)可能的圓弧中較大的一個(gè)，范圍從40,20到60,70。 下面是一起顯示的黃色和紅色弧線，以說(shuō)明不同之處：

綠色和藍(lán)色?。▉?lái)自前面的示例中所有四個(gè)圓?。┡c黃色和紅色圓弧相同，但繪制時(shí)掃描標(biāo)志(sweep-flag)設(shè)置為1。這意味著它們將繪制相同的圓弧，但在從起點(diǎn)到終點(diǎn)的軸線上進(jìn)行鏡像。

二次貝塞爾曲線

還可以使用<path>元素繪制二次Bezier曲線。 繪制二次Bezier曲線是使用Q和Q命令完成的。 與直線一樣，大寫命令(Q)使用絕對(duì)坐標(biāo)作為其終點(diǎn)，而小寫命令(q)使用相對(duì)坐標(biāo)(相對(duì)于起點(diǎn))。 下面是一個(gè)簡(jiǎn)單的二次曲線示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 Q50,100 100,100" 
      style="stroke: #006666; fill:none;"/></svg>

運(yùn)行后結(jié)果如下:

該示例繪制一條二次 Bezier 曲線，從50,50到點(diǎn)100,100，控制點(diǎn)為50,200?？刂泣c(diǎn)是 Q 命令上設(shè)置的兩個(gè)參數(shù)中的第一個(gè)。

控制點(diǎn)像磁鐵一樣拉動(dòng)曲線。曲線上的一個(gè)點(diǎn)離控制點(diǎn)越近，控制點(diǎn)就越往里拉，這意味著它離控制點(diǎn)越近。以下是一些在圖像上繪制控制點(diǎn)的示例：

實(shí)際上，如果從起點(diǎn)畫一條線到控制點(diǎn)，再畫一條從控制點(diǎn)到終點(diǎn)的線，那么從第一條線的中間到第二條線的中間就是曲線的切線。 這里有一張圖片說(shuō)明了這一點(diǎn)：

三次貝塞爾曲線

使用C和c命令繪制三次貝塞爾曲線。三次貝塞爾曲線類似于二次貝塞爾曲線，除了它們具有兩個(gè)控制點(diǎn)而不是一個(gè)控制點(diǎn)。與線條一樣，大寫命令(C)使用絕對(duì)坐標(biāo)作為其終點(diǎn)，小寫命令(c)使用相對(duì)坐標(biāo)（相對(duì)于起點(diǎn)）:

<path d="M50,50 C75,80 125,20 150,50"
      style="stroke: #006666; fill:none;"/>

這是繪制了控制點(diǎn)的結(jié)果圖像，運(yùn)行后結(jié)果如下.

您可以使用三次貝塞爾曲線創(chuàng)建高級(jí)曲線:

閉合路徑

該<path>元件具有用于關(guān)閉所述通路，這意味著從繪制的最后一個(gè)點(diǎn)回到第一點(diǎn)的線的快捷命令。該命令是Z（或z-大寫和小寫閉合路徑命令之間沒(méi)有區(qū)別）:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M50,50 L100,50 L100,100 Z"
    style="stroke: #006666; fill:none;"/></svg>

運(yùn)行后結(jié)果如下:

組合命令

可以在同一<path>元素中組合path命令。下面是一個(gè)實(shí)例：

<svg width="500" height="225">
    <path d="M100,100 L150,100 a50,25 0 0,0 150,100 q50,-50 70,-170 Z" style="stroke: #006666; fill: none;"></path>
</svg>

此示例繪制一條直線、一條圓弧、一條二次Bezier曲線，并以一條回到起點(diǎn)的直線閉合路徑結(jié)束。 以下是生成的圖像：

填充路徑

可以使用fill CSS屬性填充路徑。下面是一個(gè)實(shí)例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M100,100 L150,100 L150,150  Z"
      style="stroke: #0000cc;
             stroke-width: 2px;             fill  : #ccccff;"/></svg>

運(yùn)行后結(jié)果如下:

請(qǐng)注意，形狀的內(nèi)部是如何用淺藍(lán)色填充的。

標(biāo)記

您可以在<path>元素上使用標(biāo)記。 標(biāo)記是位于路徑的起點(diǎn)、中部和終點(diǎn)的小符號(hào)，用于顯示路徑的方向。 例如，路徑起始處有一個(gè)圓形或正方形，末尾有一個(gè)箭頭。

符號(hào)快捷方式

如果您需要一次又一次使用同一條命令，則可以省略該命令字母，而只需提供一組額外的參數(shù)即可，就像該命令在那里一樣。這是一個(gè)示例:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M10,10   l100,0  0,50  -100,0  0,-50"
      style="stroke: #000000; fill:none;" /></svg>

此示例說(shuō)明如何將其他參數(shù)傳遞給l命令，就好像每個(gè)參數(shù)對(duì)前面都有一個(gè)l一樣。 這也適用于其他路徑命令。 以下是生成的圖像：

Path 命令大全

以下是SVG path元素可能的筆命令的列表。每個(gè)命令由一個(gè)字母和一組數(shù)字（坐標(biāo)等）組成，它們是該命令的參數(shù)。大寫命令通常將坐標(biāo)參數(shù)解釋為絕對(duì)坐標(biāo)。小寫命令通常將坐標(biāo)參數(shù)解釋為與當(dāng)前筆位置相對(duì)。