SVG标记用于标记线或者路径的开始，中间和结尾。例如，我们可以在路径的开始处使用圆圈或者正方形标记，并在路径的结束处使用箭头标记。

标记示例

这是一个简单的视觉示例，说明标记的外观：

标记是使用 <marker>元素创建的。 " <marker>"元素必须嵌套在" <defs>"元素内。通常，元素<defs>包含一组SVG图像的可重用定义。

这是上一个示例的SVG代码：

<defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
    </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;" />
    </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);
                 "

        />

首先，注意 <defs>元素，其中有两个 <marker>元素。两个 <marker>元素定义了上一个图像中所示的开始和结束标记。

其次，注意<path>元素是如何使用CSS的mark-start和mark-end属性从其style属性中引用两个<marker>元素的。这是我们指定给定路径使用哪些标记的方式。我待会儿再讲。

定义标记

我们可以使用 <marker>元素定义一个标记。这是一个例子：

<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")。由于标记是一个单独的图形元素，因此必须明确设置宽度和高度。

<marker>元素的id属性用于引用<path>元素中的该标记。

refX和refY坐标设置将标记内的哪个点用作参考点。参考点是使用标记定位在路径开头的位置。在此示例中，将refX和refY设置为圆的中心，这意味着圆的中心将放置在路径的起点。如果我们未设置refX和refY，它们将被假定为0，这会将标记的左上角放在路径的开头。

在<marker>元素内部是一个<circle>元素。圆元素的中心为(cx和cy)，位于" 5,5"。中心点是标记虚拟框中的中心。它不是实际放置在图像上的位置。使用markerWidth和markerHeight在 <marker>元素中将虚拟框设置为8.8.

自动定向

这是另一个<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;" />
</marker>

<marker>元素内的<path>绘制一个三角形，其尖端指向右侧。但是，如果路径不是水平线，则需要旋转三角形，以使其适合使用它的路径的方向。我们可以通过将" orient"属性设置为" auto"来实现。这将旋转 <marker>元素内的形状以适合引用它的路径。

这是一张图像，显示了五条斜率不同的线，所有线都使用与开始和结束标记相同的两个标记。注意标记如何自动旋转以适合其所用线的斜率。

这是在<marker>元素中将orient属性设置为auto的结果。

我们还可以将" orient"属性的值设置为固定的度数(例如，" 45")。使用时，它将使标记旋转那个角度。但是，这几乎不如自动定位函数有用。

从路径引用标记

我们可以使用以下CSS属性从路径引用标记：

• marker-start(标记开始)
• marker-mid(标记中间)
• marker-end(标记结束)

这三个CSS属性将标记分配给路径的起点，中点和终点。

CSS属性必须使用它们位于 <path>元素的style属性中。我们可以通过引用如下元素的id属性来引用<marker>元素：

marker-start : url(#markerId);

" markerId"应替换为要引用的" <marker>"元素的" id"属性值。

这是使用所有三个CSS属性的示例：

<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;"/>
  </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;" />
  </marker>
</defs>

<path d="M100,20 l50,0 l0,50 l50,0"
      style="stroke: #0000cc; stroke-width: 1px; fill: none;
                   marker-start: url(#markerSquare);
                   marker-mid: url(#markerSquare);
                   marker-end: url(#markerArrow);

                 "
        />

从其他形状引用标记

<path>元素不是唯一可以使用标记的SVG元素。 <line>， <polyline>和 <polygon>元素也可以使用标记。它们以与<path>元素完全相同的方式执行此操作：通过在标记"开始"，"标记中间"和"标记结束"中引用<marker>元素的id属性。 CSS属性。

标记单位

可以将标记的大小设置为缩放以适合使用它的路径的笔触宽度。这是一个视觉示例：

我们可以通过将<marker>元素的markerUnits设置为strokeWidth来达到这种效果。这实际上是该属性的默认值，因此即使我们未设置markerUnits属性，这也是默认行为。这是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>

为了避免自动缩放标记以使其适应路径的笔触宽度，请将" markerUnits"属性设置为" userSpaceOnUse"。这样，无论使用它的路径的笔触宽度如何，标记都将保持其大小。