一篇文章带您了解SVG标记Mark

SVG标记用于标记一条线或路径的开始、中间和结束。例如，您可以用圆形或正方形标记路径的起点，用箭头标记路径的终点。marker元素定义绘制在特定元素、元素、元素或元素上的箭头或多边形标签图形。1.标记的简单案例标记是使用元素创建的。元素必须嵌套在元素中。元素通常包含一组可重用的SVG图像定义。例如注意：其中包含两个元素这两个元素定义了上图所示的开始和结束标记。其次，请注意元素如何使用mark-start和marker-endCSS属性从其样式属性中引用两个元素。这就是您指定要用于给定路径的标记的方式。2.常用标记1.定义标记您可以使用元素来定义标记。示例：2.自动定向定义用作路径箭头的三角形。例如下图：显示了五行，全部其中使用相同的两个标记作为开始和结束标记注意标记如何自动旋转以适应使用它们的线的斜率。运行效果：代码解析在元素中将绘制一个三角形尖端指向右侧。但是，如果路径不是水平的，则需要旋转三角形以适应其正在使用的路径的方向。这可以通过将orient属性设置为auto来完成此操作。它将旋转元素内的形状以适应引用它的路径。这是将元素中的orient属性设置为auto的结果。您还可以将orient属性的值设置为固定度数（例如45度）。这将在使用时将标记旋转该度数。3.从其他形状引用标记3.1想法元素不是唯一可以使用标记的SVG元素。、和元素也可以使用标记。它们的操作方式与元素完全相同：通过在marker-start、marker-middle和marker-end中引用元素的id（分别为：marker-start、marker-mid和marker-end)CSSproperties属性。3.2标记单位（标记的大小可以设置为缩放以适应使用它的路径的笔画宽度）。示例：可以通过将元素的markerUnits设置为strokeWidth来实现此效果。这实际上是该属性的默认值，因此即使您没有设置markerUnits属性，这也是默认行为。代码：要避免自动缩放标记以适应路径的笔划宽度，请将markerUnits属性设置为userSpaceOnUse。这样，标记将保持其大小，而不管它所使用的路径的笔划宽度如何。3.小结本文以HTML为基础，介绍了marker标签在SVG中的常用用法。通过案例分析，详细讲解了实际应用中常见的标签样式，以及每种样式如何生成。希望通过文章的学习，能够让读者更好的理解SVG。