一篇文章帶你了解SVG marker 標(biāo)記

作者：前端進(jìn)階者 2021-01-04 10:14:42

開發(fā) 前端

SVG標(biāo)簽用于標(biāo)簽行或路徑的開始、中間和結(jié)尾。例如，可以用圓或正方形標(biāo)簽路徑的起點(diǎn)，用箭頭標(biāo)簽路徑的終點(diǎn)。

[[373456]]

marker元素定義了在特定的 <path>元素、 <line>元素、 <polyline>元素或者 <polygon>元素上繪制的箭頭或者多邊標(biāo)簽圖形。

一、Marker 簡單案例

標(biāo)記是使用<marker>元素創(chuàng)建的。

<marker> 元素必須嵌套在一個(gè)<defs>元素內(nèi)。<defs>元素通常為SVG圖像保留一組可重復(fù)使用的定義。

例

<!DOCTYPE html> 
<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>

注：

其中<defs>包含兩個(gè)<marker> 元素的元素。

這兩個(gè)<marker>元素定義了上圖中顯示的開始和結(jié)束標(biāo)記。其次，注意<path>元素如何使用mark-start和marker-end CSS屬性從其style屬性內(nèi)引用兩個(gè)<mark>元素。這就是為給定路徑指定要使用的標(biāo)記的方式。

二、常見的標(biāo)記

1. 定義標(biāo)記

可以使用<marker>元素定義標(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); /* 開始點(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>

下面的圖像 :

顯示了具有不同坡度的五條線，它們都使用相同的兩個(gè)標(biāo)記作為開始標(biāo)記和結(jié)束標(biāo)記。請(qǐng)注意，標(biāo)記如何自動(dòng)旋轉(zhuǎn)以適應(yīng)使用它們的直線的坡度。

運(yùn)行效果：

代碼解析

<marker>元素中的<path>將繪制一個(gè)尖端指向右側(cè)的三角形。但是，如果路徑不是水平線，則需要旋轉(zhuǎn)三角形，使其適合使用它的路徑的方向。

可以通過將“方向”(orient)屬性設(shè)定為“自動(dòng)”(auto)來執(zhí)行此操作。它將旋轉(zhuǎn)<marker>元素內(nèi)的形狀以適合引用它的路徑。

這是將<mark>元素中的orient屬性設(shè)置為auto的結(jié)果。也可以將orient屬性的值設(shè)定為固定的度數(shù)(例如45度)。這將使標(biāo)記在使用時(shí)旋轉(zhuǎn)該度數(shù)。

3. 從其他形狀引用標(biāo)記

3.1 思路

<path>元素不是唯一可以使用標(biāo)記的SVG元素。

<line>，<polyline>和<polygon>元素也可以使用標(biāo)記。它們以與<path>元素完全相同的方式進(jìn)行操作：通過在標(biāo)記開始，標(biāo)記中間和標(biāo)記結(jié)束（分別為：marker-start，marker-mid和marker-end）CSS屬性中引用<marker>元素的id屬性。

3.2 標(biāo)記單位

（可以將標(biāo)記的大小設(shè)置為縮放，以適合使用它的路徑的描邊寬度）。

例：

通過將<marker>元素的markerUnits設(shè)置為strokeWidth，可以實(shí)現(xiàn)此效果。這實(shí)際上是該屬性的默認(rèn)值，因此，即使您未設(shè)置markerUnits屬性，這也是默認(rèn)行為。

代碼：

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