利用SVG中path實現平滑曲線

svg中實現直線很簡單，但是實現曲線稍略顯複雜！在實際的開發場景中直線不能滿足很多的需求，如下圖所示各個圖形之間採用曲線連線，如果換成直線整個風格就略顯僵硬，所以曲線在很多場合下還是比較適用的。

直線採用svg中的line元素，如下所示：

上面的**很簡潔，(x1,y1)表示起點的座標，(x2,y2)表示終點的座標。那麼箭頭該如何表示呢？

這裡需要用到另外乙個重要的元素marker。marker標記可以放在直線，折線，多邊形和路徑的頂點。這些元素可以使用maeker屬性的"marker-start"，「marker-mid"和"marker-end」，繼承預設情況下或定義的標記的uri，你必須先定義標記，然後才可以通過其uri引用。

再來把剛剛的直線的**修改一下即可：

其效果如下所示：

箭頭的實現與上面的一樣仍然採用marker,只不過曲線的實現採用path。

path元素的簡介

path元素通常用來定義路徑。它可以被用來描述直線、曲線、折線、多邊形、圓等元素。

path元素中有乙個非常重要的屬性』d』。 'd』屬性是乙個字串，它描述了要建立的路徑位置和形狀。 'd』屬性包含多個連續的指令，如move（移動）、畫線、畫曲線、畫圓弧和曲線等等。每個指令都是乙個字母，後面跟著引數。

如下所示為乙個多邊形的例子：

上面的例子定義了一條路徑，它開始於位置 250 150，到達位置 150 350，然後從那裡開始到 350 350，最後在 250 150 關閉路徑，即乙個三角形！如下所示：

具體可以參考

path如何實現曲線

上面提到path元素有乙個屬性d，屬性d中包含很多屬性，如下圖所示：

實現曲線屬性d中一般包含指令m和c（當然也可以使用s、q、t等）。先上**與圖形直觀感受一下：

其圖形如下所示：

分析：1）m 10,234 表示畫筆的起始點；

2） c表示畫筆從起始點繪製一段三次貝塞爾曲線，(177,234) 和(177 341)表示為三次貝塞爾曲線的兩個控制點，(344,341)表示曲線的終點

貝塞爾曲線

貝塞爾曲線是什麼鬼？？看到兩篇關於貝塞爾曲線的部落格，感覺不錯，建議直接參考該部落格：

[1]

[2]

在進行曲線的繪製時，我們通常只知道起點與終點，要想繪製三次貝塞爾曲線還需要提供兩個控制點。那這兩個控制點怎麼來呢？

如果只提供起點與終點，是無法算出兩個控制點的，兩個控制點的選取需要根據實際專案需求進行確定。如下兩個曲線起點與終點相同，但是兩個控制點不同，其效果也不同：