svg中元素的使用及marker屬性的介紹

使用SVG繪製的圖形是箭頭, 可以在和中定義好再去重用，但是你每次應用的時候都需要對其移動或旋轉。直接用一個元素的話會方便很多。

元素

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

<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如何實作座標系統變換（附程式碼）

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

以上是svg中元素的使用及marker屬性的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！