一篇文章帶你了解SVG marker 標(biāo)記
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
SVG標(biāo)簽用于標(biāo)簽行或路徑的開(kāi)始、中間和結(jié)尾。例如，可以用圓或正方形標(biāo)簽路徑的起點(diǎn)，用箭頭標(biāo)簽路徑的終點(diǎn)。
marker元素定義了在特定的
一、Marker 簡(jiǎn)單案例
標(biāo)記是使用
例
<html><head><meta charset="utf-8"><title>項(xiàng)目title>head><body style="background-color: aqua;"><svg width="500" height="100"><defs><marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5"><circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;">circle>marker><marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto"><path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;">path>marker>defs><path d="M100,10 L150,10 L150,60" style="stroke: #6666ff; stroke-width: 1px; fill: none;marker-start: url(#markerCircle);marker-end: url(#markerArrow);">path>svg>body>html>
注：
其中
這兩個(gè)
二、常見(jiàn)的標(biāo)記
1. 定義標(biāo)記
可以使用
例:
<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5"><circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;" />marker>
2. 自動(dòng)定向
定義了用作路徑箭頭的三角形。
例
<svg width="500" height="100"><defs><marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto"><rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;">path>marker><marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto"><path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;">path>marker>defs><path d="M100,20 l0,50" style="stroke: #0000cc; stroke-width: 1px; fill: none;marker-start: url(#markerSquare);marker-end: url(#markerArrow);marker-mid: url(#markerSquare);">path><path d="M140,20 l25,50" style="stroke: #0000cc; stroke-width: 1px; fill: none;marker-start: url(#markerSquare); /* 開(kāi)始點(diǎn) */marker-end: url(#markerArrow); /* 中間點(diǎn) */marker-mid: url(#markerSquare); /*結(jié)束點(diǎn) */">path><path d="M180,20 l50,50" style="stroke: #0000cc; stroke-width: 1px; fill: none;marker-start: url(#markerSquare);marker-end: url(#markerArrow);marker-mid: url(#markerSquare);">path><path d="M220,20 l50,25" style="stroke: #0000cc; stroke-width: 1px; fill: none;marker-start: url(#markerSquare);marker-end: url(#markerArrow);marker-mid: url(#markerSquare);">path><path d="M260,20 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none;marker-start: url(#markerSquare);marker-end: url(#markerArrow);marker-mid: url(#markerSquare);">path>svg>
下面的圖像 :
顯示了具有不同坡度的五條線(xiàn)，它們都使用相同的兩個(gè)標(biāo)記作為開(kāi)始標(biāo)記和結(jié)束標(biāo)記。請(qǐng)注意，標(biāo)記如何自動(dòng)旋轉(zhuǎn)以適應(yīng)使用它們的直線(xiàn)的坡度。
運(yùn)行效果：
代碼解析
可以通過(guò)將“方向”(orient)屬性設(shè)定為“自動(dòng)”(auto)來(lái)執(zhí)行此操作。它將旋轉(zhuǎn)
這是將元素中的orient屬性設(shè)置為auto的結(jié)果。也可以將orient屬性的值設(shè)定為固定的度數(shù)(例如45度)。這將使標(biāo)記在使用時(shí)旋轉(zhuǎn)該度數(shù)。
3. 從其他形狀引用標(biāo)記
3.1 思路
3.2 標(biāo)記單位
（可以將標(biāo)記的大小設(shè)置為縮放，以適合使用它的路徑的描邊寬度） 。
例：
通過(guò)將
代碼：
<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"orient="auto" markerUnits="strokeWidth"><rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>marker>
為避免自動(dòng)縮放標(biāo)記以使其適應(yīng)路徑的筆觸寬度，請(qǐng)將markerUnits屬性設(shè)置為userSpaceOnUse。這樣，無(wú)論使用它的路徑的筆觸寬度如何，標(biāo)記都將保持其大小。
三、總結(jié)
文章基于HTML基礎(chǔ)，介紹了SVG中marker標(biāo)簽 常見(jiàn)的用法。在實(shí)際應(yīng)用中常見(jiàn)的標(biāo)簽樣式，對(duì)每一種樣式如何生成，都通過(guò)案例的分析進(jìn)行了詳細(xì)的講解。
希望通過(guò)文章的學(xué)習(xí)，能夠讓讀者更好的理解SVG。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行