SVG使用marker画箭头(一)

SVG是一种基于XML的矢量图形格式，可用于创建图形和动画效果。使用SVG，我们可以轻松地在网页上创建高质量的矢量图形，如任意线条、多边形、矩形、圆形等。本文将介绍如何使用marker属性在SVG中画箭头。

Marker属性介绍

Marker是SVG中一个非常有用的属性，它允许我们定义一个图形，在其他元素中引用并重复使用。实际上，marker本质是一个带有类似箭头或其他形状样式的路径或形状，它可以被其他图形引用作为复制和克隆。在SVG中，marker是通过元素来定义和使用的。

元素定义如下：

<marker
  id="arrow"
  viewBox="0 0 10 10"
  refX="5"
  refY="5"
  markerWidth="6"
  markerHeight="6"
  orient="auto">
  <path d="M0,0 L10,5 L0,10 Z" />
</marker>

其中：

• id: marker的ID，可以被其他元素引用。
• viewBox: marker的视口大小，用于确定图形边界。
• refX: marker的参考点X坐标。
• refY: marker的参考点Y坐标。
• markerWidth: marker的宽度。
• markerHeight: marker的高度。
• orient: marker的朝向，值为"auto"时，根据曲线的切线自动改变方向；值为"angle"时，是一个数字，指定了旋转多少度，使得箭头的方向朝向曲线。

箭头形状采用了SVG中的元素定义，具体形状可以根据实际需要自定义。

应用marker画箭头

在我们了解了marker属性的基本概念和用法之后，来看看如何通过marker画箭头。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M0,0 L10,5 L0,10 Z"/>
    </marker>
  </defs>

  <line x1="50" y1="50" x2="200" y2="50" stroke="#333" stroke-width="2" marker-end="url(#arrow)" />
</svg>

在上面的代码中，我们定义了一个id为"arrow"的marker，在元素中使用marker-end属性引用了它。这里使用了元素来定义marker，元素用于在SVG文件中定义可重复使用的元素。

arrow形状是一个三角形，采用了元素定义，其中M表示起始点，L表示线段，Z表示结束和闭合路径。具体的路径可以根据需要自定义。

marker-end是一个元素的属性，它定义了线段的结束处的箭头所使用的marker。另外一个属性marker-start则是指定了线段的起始点箭头引用的marker。

通过上述定义，我们就可以在图形中画出精美的箭头来指示方向、关联关系等。

以上是WebView技术博客对SVG使用marker画箭头的一篇介绍文章，下期将会介绍更多有关SVG的知识，敬请期待！