使用SVG繪製的圖形是箭頭, 可以在
marker是可以連結一個或多個path、line、polyline、或polygon的頂點的標誌類型。最常見的用例是繪製箭頭或在輸出結果的線上的標記一個（polymarker）圖形。
使用
<svg width="600px" height="100px"> <defs> <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="#f00" /> </marker> </defs> <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" /> </svg>
marker的屬性
markerWidth和markerHeight屬性定義了marker視窗的寬度和高度。
上面的實例中我把markerWidth和markerHeight都設定為10px。 path中繪製出的三角形需要適應9px x 6px的面積，所以我也可以把markerWidth設定為9，然互markerHeight設定為6。這是marker可以接受的最小尺寸，任何小於這個的尺寸都會導致圖形被裁剪。
接下來的兩個屬性，refX和refY，指的是圖形元素和marker連接的位置座標。我們也為背後的場景套用了一個變換，來移動marker，與之對齊。
下一個屬性，orient，這個屬性是我為什麼在轉換line的方向時，不需要調整marker的原因。它接受一個auto值，或一個角度值，這個值決定了marker是否要旋轉，在與其它內容連接的時候。
auto這個值表示marker會隨著套用的元素一起旋轉。 45deg這個值則表示marker的方向一直保持45deg，不會隨著連接的元素一起旋轉。大多數時候這個值都是設定為auto的。
最後一個屬性是markerUNits，用來決定marker是否進行縮放。它定義了markerWidth和markerHeight，以及marker的內容本身的座標系統。
它接受兩個值，strokeWidth和userSpaceOnUse。預設值是strokeWidth，這也是大家大多數情況下會設定的值，因為它允許你的marker隨著它連接的line進行縮放。
strokeWidth:座標系統中的marker值和目前描邊寬度的單位是相同的尺寸。也就是說strokeWidth這個值允許你的marker縮放。
userSpaceOnUse: marker的值是目前使用者座標系統的值。也就是說如果你的marker是半徑為10px的圓，它就一直都是10px的半徑，不受連接的元素的影響。
Marker特性－在元素中引用marker
marker-end="url(#arrow)”
給line、path、polyline、polygon這些基礎圖形應用marker一共有四種方法：
marker-start=”url(#marker-id)”
#marker-mid=”url(#marker-id)”
marker-end=”url(#marker-id)”
#marker=”url(#marker-id)”
相關文章推薦：
svg如何實作座標系統變換（附程式碼）以上是svg中
