SVG 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>
可以通过<marker>元素创建标记。<marker>元素必须嵌套在<defs>元素内。<defs>元素内通常保存一组可重用的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);
"
/>首先，请注意看内部带有两个<marker>元素的<defs>元素。两个<marker>元素定义了之前图片中展示的开始和结束标记。
然后，注意<path>元素如何通过其style属性，并使用CSS属性marker-start和marker-end引用这两个<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>这个例子定义了一个宽度（markerWidth="8"）和高度（markerHeight="8"）都为8的标记。宽度和高度需要显示设置，因为标记是一个独立的图形元素。
<marker>元素的id属性是用来在<path>元素中对其引用。
标记中的refX和refY坐标集被用作参考点。参考点是使用此标记的路径的开始位置。此例子中，refX和refY设置为圆的中心，意味着圆的中心将被放在路径的开始位置。如果未设置refX和refY，其默认为0，即标记的左上角会被放在路径的开始处。
<marker>元素中是一个<circle>元素。circle元素的圆心（cx和cy）在点5,5。中心点是标记虚拟框内的中心。它不在实际放置在图像中的位置。在<marker>元素上使用markerWidth和markerHeight将虚拟框的大小设置为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><path>内部的<marker>元素绘制了一个箭头指向右边的三角形。然而，如果路径不是一条水平线，你就需要旋转三角形来适应路径的方向。你可以将orient属性设置为auto来实现上述效果。<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>
这就是将<marker>元素中的orient属性设置为auto达到的效果。
你也可以将orient属性值设置为固定的角度（如45）。这将导致标记旋转指定的角度。然而，这并不如自动定向功能那么有用。
你可以在path上使用这些CSS属性引用标记：
- marker-start
- marker-mid
- marker-end
这三个CSS属性分别为路径的开始、中间点和结束指定标记。
必须在<path>元素的style属性中使用这些CSS属性。你可以通过标记的id属性来引用它，就像下面这样：
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);
"
/>结果图片如下：
<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 l50,0 l0,50 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none;
marker-start: url(#markerSquare);
marker-end: url(#markerArrow);
marker-mid: url(#markerSquare);
"></path>
<path>元素不是SVG元素中唯一可以使用标记的元素。<line>、<polyline>和<polygon>元素也可以使用标记。它们和<path>引用标记的方式完全一样：在CSS属性marker-start、marker-mid和marker-end中引用<marker>元素的id属性。
标记的大小可以设置为适应路径边框宽度。这里有一个可视化的例子：
<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 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="M150,20 l50,50" style="stroke: #0000cc; stroke-width: 2px; fill: none;
marker-start: url(#markerSquare);
marker-end: url(#markerArrow);
marker-mid: url(#markerSquare);
"></path>
<path d="M200,20 l50,50" style="stroke: #0000cc; stroke-width: 3px; fill: none;
marker-start: url(#markerSquare);
marker-end: url(#markerArrow);
marker-mid: url(#markerSquare);
"></path>
你可以将<marker>元素的makerUnits设置为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。这样，标记将保持其大小，而不管使用它的路径的边框宽度如何变化。