SVG標(biāo)簽用于標(biāo)簽行或路徑的開始、中間和結(jié)尾。例如，可以用圓或正方形標(biāo)簽路徑的起點，用箭頭標(biāo)簽路徑的終點。marker元素定義了在特定的 <path>元素、 <line>元素、 <polyline>元素或者 <polygon>元素上繪制的箭頭或者多邊標(biāo)簽圖形
這是一個簡單的視覺示例，說明標(biāo)記的外觀:
標(biāo)記是使用<marker>元素創(chuàng)建的。<marker> 元素必須嵌套在一個<defs>元素內(nèi)。<defs>元素通常為SVG圖像保留一組可重復(fù)使用的定義。
這是上面圖形示例的SVG代碼:
<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>測試看看 ?/?
首先，請注意其中<defs>包含兩個<marker> 元素的元素。這兩個<marker>元素定義了上圖中顯示的開始和結(jié)束標(biāo)記。
其次，注意<path>元素如何使用mark-start和marker-end CSS屬性從其style屬性內(nèi)引用兩個<mark>元素。 這就是為給定路徑指定要使用的標(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>
本示例定義了一個寬度為8(markerWidth=“8”)、高度為8(markerHeight=“8”)的標(biāo)記。 由于標(biāo)記是單獨的圖形元素，因此必須顯式設(shè)置寬度和高度。
<mark>元素的id屬性用于從<path>元素引用此標(biāo)記。
refX和refY坐標(biāo)設(shè)置標(biāo)記內(nèi)的點用作參考點。參考點是使用標(biāo)記定位在路徑開始處的點。在本示例中，refX和refY設(shè)置為圓的中心，這意味著圓的中心將放置在路徑的起點處。如果不設(shè)置refX和refY，它們將被假定為0，這將使標(biāo)記的左上角位于路徑的開始處。
在<marker>元素內(nèi)部是一個<circle>元素。 circle元素定義為以5,5為中心（cx和cy）。 中心點是標(biāo)記虛擬框中的中心。 它不是實際放置在圖像上的位置。 使用markerWidth和markerHeight在<marker>元素中將虛擬框的大小設(shè)置為8.8。
這是另一個<marker>定義示例。本示例定義了用作路徑箭頭的三角形。
<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); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></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>測試看看 ?/?
<marker>元素中的<path>將繪制一個尖端指向右側(cè)的三角形。但是，如果路徑不是水平線，則需要旋轉(zhuǎn)三角形，使其適合使用它的路徑的方向?？梢酝ㄟ^將“方向”(orient)屬性設(shè)定為“自動”(auto)來執(zhí)行此操作。它將旋轉(zhuǎn)<marker>元素內(nèi)的形狀以適合引用它的路徑。
下面的圖像顯示了具有不同坡度的五條線，它們都使用相同的兩個標(biāo)記作為開始標(biāo)記和結(jié)束標(biāo)記。 請注意，標(biāo)記如何自動旋轉(zhuǎn)以適應(yīng)使用它們的直線的坡度。
運行效果如下：
這是將<mark>元素中的orient屬性設(shè)置為auto的結(jié)果。
也可以將orient屬性的值設(shè)定為固定的度數(shù)(例如45度)。 這將使標(biāo)記在使用時旋轉(zhuǎn)該度數(shù)。 不過，這遠(yuǎn)不如自動定向功能有用。
您可以使用以下CSS屬性從路徑引用標(biāo)記:
marker-start
marker-mid
marker-end
這三個CSS屬性將標(biāo)記分配給路徑的起點，中點和終點。
CSS屬性必須位于使用它們的<path>元素的style屬性中。 您可以通過引用其id屬性來引用<marker>元素，如下所示：
marker-start : url(#markerId);
markerId應(yīng)該替換為要引用的<mark>元素的id屬性的值。
這是使用所有三個CSS屬性的示例:
<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); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></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>測試看看 ?/?
運行結(jié)果如下:
<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屬性。
可以將標(biāo)記的大小設(shè)置為縮放，以適合使用它的路徑的描邊寬度。 下面是一個可視化示例：
通過將<marker>元素的markerUnits設(shè)置為strokeWidth，可以實現(xiàn)此效果。 這實際上是該屬性的默認(rèn)值，因此，即使您未設(shè)置markerUnits屬性，這也是默認(rèn)行為。 這是SVG代碼中的樣子：
<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>
為避免自動縮放標(biāo)記以使其適應(yīng)路徑的筆觸寬度，請將markerUnits屬性設(shè)置為userSpaceOnUse。 這樣，無論使用它的路徑的筆觸寬度如何，標(biāo)記都將保持其大小。