svg: marker

使用SVG繪製的圖形是箭頭, 能夠在<defs>和<symbol>中定義好再去重用，可是你每次應用的時候都須要對其移動或旋轉。直接用一個<marker>元素的話會方便不少。

<marker>元素

marker是一種能夠連結一個或多個path、line、polyline、或polygon的頂點的標誌類型。最多見的用例是繪製箭頭或在輸出結果的線上的標記一個（polymarker）圖形。
使用<marker>元素建立一個marker，以及其相關屬性。一般咱們把marker放在<defs>元素中，而後在其它地方對其進行引用。下面咱們經過一個簡單的實例來學習。

<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)」