svg中<marker>元素的使用及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一共有四種方法：

相關文章推薦：

在react中使用svg的各種方法總結（附代碼）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com