SVG path

　　在網頁上畫一圖形，好比星星或波浪線，開始是想着圖形軟件畫一個的，後來發現SVG這繪圖程序的語言，感受甚是能夠，就發了些時間學了一下，在此作一簡單分享和記錄。

菜鳥上是這麼介紹的（SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)，SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失，SVG 是萬維網聯盟的標準。。。。）

　　並且SVG 文件可經過<embed>、<object> 或者 <iframe>標籤嵌入 HTML 文檔。也能夠直接嵌入到HTML頁面中，或您能夠直接連接到SVG文件。反正使用起來仍是挺方便的 ，只要瀏覽器支持，推薦瀏覽器能支持HTML5的使用。 

　　SVG確是很強大，可以繪製各類基本圖形（矩形、圓、橢圓、多邊形、曲線、路徑、文本等），還有各類濾鏡、模糊效果、陰影、漸變等特效。而後其中的路徑path它不只能建立其餘基本形狀，還能建立更多複雜形狀（拋物線、波浪線.....甚至all）。反正path又是SVG裏強大的一個，因此這裏單獨來討論path。

---

　　path中存在不少命令來定義路徑形式和路徑數據。可大體分爲直線命令和曲線命令

直線命令

M = moveto

　　字母「M」表示的是「Move to」命令，當解析器讀到這個命令時，它就知道你是打算移動到某個點。跟在命令字母后面的，是你須要移動到的那個點的x和y軸座標。好比移動到(10,10)這個點的命令，應該寫成「M 10 10」。這一段字符結束後，解析器就會去讀下一段命令。由於M命令僅僅是移動畫筆，但不畫線。因此M命令常常出如今路徑的開始處，用來指明從何處開始畫。好比：

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

</svg>

這樣是看不到任何圖像的，由於這樣只是把畫筆移動到了x-10px,y-10px處。須要畫出東西得在後面跟上其餘畫圖命令以下面介紹到的命令。

注：每個命令都有兩種表示方式，一種是用大寫字母，表示採用絕對定位。另外一種是用小寫字母，表示採用相對定位，（例如：從上一個點開始，向上移動10px，向左移動7px）path元素的形狀是經過屬性d定義的，由於屬性d採用的是用戶座標系統，因此不需標明單位。

L = lineto

　　字母「L」表示的是「line to」命令，L須要兩個參數，分別是一個點的x軸和y軸座標，L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。這裏就一塊兒把「H」和「V」兩個命令一塊兒介紹了，

• H = horizontal lineto ——繪製平行線。
• V = vertical lineto ——繪製垂直線。

這兩個命令都只帶一個參數，標明在x軸或y軸移動到的位置，由於它們都只在座標軸的一個方向上移動。好比，繪製平行線只須要肯定x軸（H x），繪製垂直線只需肯定y軸 ( V x )。

如今來整理以上命令繪製一個簡單的矩形（固然SVG中有專門的 矩形命令<rect/>）。

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  
  <path d="M10 10 H 100 V 100 H 10 L 10 10" stroke="black"/>

</svg>

上述路徑是：畫筆移動到(10,10)點，由此開始，向右移動90像素構成一條水平線，而後向下移動90像素，而後向左移動90像素，而後再向上移動100再回到起點。

Z = closepath

　　「Z」命令爲路徑閉合命令，Z命令會從當前點畫一條直線到路徑的起點，儘管咱們不老是須要閉合路徑，可是它仍是常常被放到路徑的最後。另外，Z命令不用區分大小寫。

而後實際上上面的例子咱們能夠優化爲

<path d="M10 10 H 100 V 100 H 10 Z" stroke="black" fill="transparent"/>

　　注：stroke：路徑顏色，fill：閉合路徑的填充顏色，stroke-width：路徑寬度

曲線命令

　　繪製平滑曲線的命令有三個，其中兩個用來繪製貝塞爾曲線，最後一個用來繪製弧形或者說是圓的一部分（主要介紹C、S，A圓弧曲線這裏將不予討論）。

• C = curveto
• Q = quadratic Bézier curve
• A = elliptical Arc

　　C 和 Q 是用來繪製貝塞爾曲線的，「貝塞爾曲線」是什麼？這東西老難解釋了，在這實際上也用不着深刻研究，若是有興趣能夠閱讀這份Wikipedia的文檔。貝塞爾曲線的類型有不少（線性貝塞爾曲線、二次方貝塞爾曲線、三次方貝塞爾曲線、四次方貝塞爾曲線、五次方貝塞爾曲線、……。），可是在path元素裏，只存在兩種貝塞爾曲線：三次貝塞爾曲線C，和二次貝塞爾曲線Q。

三次貝塞爾曲線C：

C x1 y1, x2 y2, x y 

<path d="M10 10 C 30 50, 100 60, 200 10" stroke="black" fill="transparent"/>

x1 y1, x2 y2 是兩個控制點，x y 爲曲線終點，這裏盜一下圖：

是否是很熟悉，在ps中繪製曲線的鋼筆工具繪製的實際上就是「貝塞爾曲線」。

是否是多條三次貝塞爾曲線組合在一塊兒能夠獲得一條很長的變化莫測的（^-<）平滑曲線，確實。但那是否是描點很麻煩，確實，因此 出現了S ( smooth curveto)命令，S命令能夠用來建立與以前那些曲線同樣的貝塞爾曲線，

可是，若是S命令跟在一個C命令或者另外一個S命令的後面，它的第一個控制點，就會被假設成前一個控制點的對稱點。若是S命令單獨使用，前面沒有C命令或者另外一個S命令，

那麼它的兩個控制點就會被假設爲同一個點，變成了二次貝塞爾曲線。

 

（MDN 貝塞爾曲線示意圖）。

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"> ,M10 80 肯定了畫筆起點，C 後跟了兩個控制點座標，這時已經完成了一條三次貝塞爾曲線了，而後當咱們須要再次繪製一條鏈接第一條曲線的

貝塞爾曲線時，跟上S命令後只需給出第二條三次貝塞爾曲線的第二個控制點的座標便可（S指令會自動補出第一個控制點與第二個控制點對稱 [藍色部分]）,因而就能夠繪製出一條完美的平滑曲線了。

C指令有三個座標參數，而S指令自動對稱一個控制點，所以，跟在C指令以後的S指令，只須要2個參數，以下：

S x2 y2, x y

 另外一種可用的貝塞爾曲線是二次貝塞爾曲線Q，它比三次貝塞爾曲線簡單，只須要肯定一個控制點和一個終點便可（固然還有起點）。

<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

以下圖：

A和C分別是起點和終點，B是控制點，其指令和參數爲：

Q x1 y1, x y

一樣，Q二次貝塞爾曲線也存在一簡化連續繪製平滑曲線的命令，他就是T (smooth quadratic Bézier curveto)。

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

或者是另外一個T命令，才能達到這種效果。若是T單獨使用，那麼控制點就會被認爲和終點是同一個點，因此畫出來的將是一條直線。繼續上MDN示意圖：

下面藍色的控制點就是T命令自動補上的。

<path d="M10 80 Q 185 10, 360 80 T 720 80" stroke="black" fill="transparent"/>
<path d="M10 80 Q 95 10,185 80 T 360 80" stroke="black" fill="transparent"/>
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

　　　　　　　　　　　　　　　　　　　　　　　　（效果圖）

 

 雖然二次貝塞爾曲線繪製比較三次貝塞爾曲線簡單，但三次貝塞爾曲線擁有更大的自由度，具體使用哪一種曲線，一般取決於需求，以及對曲線對稱性的依賴程度。

 

 最後附上一張繪製前的草圖

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 210 0 ,400 80 T 800 80 T 1200 80 T 1600 80" stroke="black" fill="transparent">
</svg>

畫筆由原點向下移動了80px向左移動了10px，而後繪製了第一條二次貝塞爾曲線緊接着使用T指令繪製了第二條第三條第四條……，一條很長的波浪線就橫空出世了。

 

SVG繪製的爲矢量圖，我感到最大的好處是能夠動態的改變圖形的形狀和顏色，用來做動畫真的太讚了（像我這種繪畫藝術細菌爲零的程序猿）。

 

 參考文章：

深度掌握SVG路徑path的貝塞爾曲線指令

路徑