前言：
SVG中實作直線很簡單，但是實作曲線稍略顯複雜！在實際的開發場景中直線不能滿足很多的需求，如下圖所示各個圖形之間采用曲線連接配接，如果換成直線整個風格就略顯僵硬，是以曲線在很多場合下還是比較适用的。
帶箭頭的直線如何實作
直線采用SVG中的line元素，如下所示：
<line x1="0" y1="0" x2="100" y2="200"></line>
上面的代碼很簡潔，(x1,y1)表示起點的坐标，(x2,y2)表示終點的坐标。那麼箭頭該如何表示呢？
這裡需要用到另外一個重要的元素marker。marker标記可以放在直線，折線，多邊形和路徑的頂點。這些元素可以使用maeker屬性的"marker-start"，“marker-mid"和"marker-end”，繼承預設情況下或定義的标記的URI，你必須先定義标記，然後才可以通過其URI引用。
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2"style="fill: #000000;" />
</marker>
</defs>
再來把剛剛的直線的代碼修改一下即可：
<line x1="0" y1="0" x2="100" y2="200" style="stroke:red;marker-end: url(#markerArrow);"></line>
其效果如下所示：
帶箭頭的曲線如何實作
箭頭的實作與上面的一樣仍然采用marker,隻不過曲線的實作采用path。
path元素的簡介
path元素通常用來定義路徑。它可以被用來描述直線、曲線、折線、多邊形、圓等元素。
path元素中有一個非常重要的屬性’d’。 'd’屬性是一個字元串，它描述了要建立的路徑位置和形狀。 'd’屬性包含多個連續的指令， 如Move（移動）、畫線、畫曲線、畫圓弧和曲線等等。 每個指令都是一個字母，後面跟着參數。
如下所示為一個多邊形的例子：
<path d="M250 150 L150 350 L350 350 Z" />
上面的例子定義了一條路徑，它開始于位置 250 150，到達位置 150 350，然後從那裡開始到 350 350，最後在 250 150 關閉路徑，即一個三角形！如下所示：
具體可以參考http://www.w3school.com.cn/svg/svg_path.asp
path如何實作曲線
上面提到path元素有一個屬性d，屬性d中包含很多屬性，如下圖所示：
實作曲線屬性d中一般包含指令M和C（當然也可以使用S、Q、T等）。先上代碼與圖形直覺感受一下：
<path class="link" d="M 10,234 C 177,234 177,341 344,341" style="fill:none;stroke:#ccc;stroke-width=6px;cursor: default;marker-end: url(#markerArrow);">
其圖形如下所示：
分析：
1）M 10,234 表示畫筆的起始點；
2） C表示畫筆從起始點繪制一段三次貝塞爾曲線，(177,234) 和(177 341)表示為三次貝塞爾曲線的兩個控制點，(344,341)表示曲線的終點
貝塞爾曲線
貝塞爾曲線是什麼鬼？？看到兩篇關于貝塞爾曲線的部落格，感覺不錯，建議直接參考該部落格：
[1] http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
[2] http://justcoding.iteye.com/blog/2226354
一些思考
在進行曲線的繪制時，我們通常隻知道起點與終點，要想繪制三次貝塞爾曲線還需要提供兩個控制點。那這兩個控制點怎麼來呢？
如果隻提供起點與終點，是無法算出兩個控制點的，兩個控制點的選取需要根據實際項目需求進行确定。如下兩個曲線起點與終點相同，但是兩個控制點不同，其效果也不同：
<path class="link" d="M 10,234 C 177,234 177,341 344,341" style="fill:none;stroke:#ccc;stroke-width=6px;cursor: default;marker-end: url(#markerArrow);"/>
<path class="link" d="M 10,234 C 0,234 150,341 344,341" style="fill:none;stroke:red;stroke-width=6px;cursor: default;"/>
其效果如下：