這篇文章主要介紹了svg中元素怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了安義免費(fèi)建站歡迎大家使用！

元素

marker是一種可以連結(jié)一個(gè)或多個(gè)path、line、polyline、或polygon的頂點(diǎn)的標(biāo)志類型。最常見的用例是繪制箭頭或在輸出結(jié)果的線上的標(biāo)記一個(gè)（polymarker）圖形。
使用元素創(chuàng)建一個(gè)marker，以及其相關(guān)屬性。通常我們把marker放在元素中，然后在其它地方對(duì)其進(jìn)行引用。下面我們通過一個(gè)簡單的實(shí)例來學(xué)習(xí)。

marker的屬性

markerWidth和markerHeight屬性定義了marker視窗的寬度和高度。

上面的實(shí)例中我把markerWidth和markerHeight都設(shè)置為10px。path中繪制出的三角形需要適應(yīng)9px x 6px的面積，所以我也可以把markerWidth設(shè)置為9，然互markerHeight設(shè)置為6。這是marker可以接受的最小尺寸，任何小于這個(gè)的尺寸都會(huì)導(dǎo)致圖形被裁剪。
接下來的兩個(gè)屬性，refX和refY，指的是圖形元素和marker連接的位置坐標(biāo)。我們還給背后的場(chǎng)景應(yīng)用了一個(gè)變換，來移動(dòng)marker，與之對(duì)齊。

下一個(gè)屬性，orient，這個(gè)屬性是我為什么在轉(zhuǎn)換line的方向時(shí)，不需要調(diào)整marker的原因。它接受一個(gè)auto值，或者一個(gè)角度值，這個(gè)值決定了marker是否要旋轉(zhuǎn)，在與其它內(nèi)容連接的時(shí)候。

auto這個(gè)值表示marker會(huì)隨著應(yīng)用的元素一起旋轉(zhuǎn)。45deg這個(gè)值則表示marker的方向一直保持45deg，不會(huì)隨著連接的元素一起旋轉(zhuǎn)。大多數(shù)時(shí)候這個(gè)值都是設(shè)置為auto的。

最后一個(gè)屬性是markerUNits，用于確定marker是否進(jìn)行縮放。它定義了markerWidth和markerHeight，以及marker的內(nèi)容本身的坐標(biāo)系統(tǒng)。

它接受兩個(gè)值，strokeWidth和userSpaceOnUse。默認(rèn)值是strokeWidth，這也是大家大多數(shù)情況下會(huì)設(shè)置的值，因?yàn)樗试S你的marker隨著它連接的line進(jìn)行縮放。

strokeWidth:坐標(biāo)系統(tǒng)中的marker值和當(dāng)前描邊寬度的單位是相同的尺寸。也就是說strokeWidth這個(gè)值允許你的marker縮放。
userSpaceOnUse: marker的值是當(dāng)前用戶坐標(biāo)系統(tǒng)的值。也就是說如果你的marker是一個(gè)半徑為10px的圓，它就一直都是10px的半徑，不受連接的元素的影響。

Marker特性——在元素中引用marker

marker-end="url(#arrow)”

給line、path、polyline、polygon這些基礎(chǔ)圖形應(yīng)用marker一共有四種方法：

• marker-start=”url(#marker-id)”

• marker-mid=”url(#marker-id)”

• marker-end=”url(#marker-id)”

• marker=”url(#marker-id)”

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“svg中元素怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!