返回

轻松绘制SVG箭头，掌控Marker的奥秘

前端

SVG隐秘之招(五)：任你尽情作画，箭头绘制交给marker代劳

过去，我在一个项目中运用SVG实现节点关系的绘制，并且需要在连线上添加箭头，以指示数据流向。为了计算箭头的坐标，我煞费苦心。然而，现在掌握了SVG中的marker特性，这一切都变得轻而易举。

SVG中的Marker：箭头的秘密武器

Marker是SVG中一个鲜为人知的特性，它允许你在SVG文档中定义和使用自定义形状。你可以利用marker来轻松创建箭头和其他装饰元素，并将其应用于路径或形状。

要定义一个marker，你需要使用<marker>元素。<marker>元素具有以下属性：

  • id：marker的唯一标识符。
  • viewBox：marker的视口尺寸，它定义了marker的边界框。
  • refX和refY：指定marker的锚点，它定义了marker相对于路径或形状的位置。
  • markerWidth和markerHeight：定义marker的宽度和高度。
  • orient：指定marker的旋转角度。
  • markerUnits：定义marker尺寸的单位（userSpaceOnUse或strokeWidth）。

创建自定义箭头Marker

让我们通过一个简单的例子来创建自定义箭头marker。在SVG文档中，添加以下代码：

<defs>
  <marker id="triangle" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10" markerHeight="10" orient="auto">
    <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
  </marker>
</defs>

这段代码定义了一个三角形形状的marker，其填充为红色。

应用Marker到路径

现在，你可以将marker应用到SVG路径。使用marker-end或marker-start属性，如下所示：

<path d="M 100 100 L 200 200" stroke="black" stroke-width="2" marker-end="url(#triangle)" />

这段代码创建一条从点(100, 100)到点(200, 200)的路径，并在路径末端应用了三角形marker。

释放SVG的箭头绘制潜力

使用marker，你可以轻松创建各种形状和大小的箭头。你可以自定义marker的填充、描边、旋转角度和锚点。通过这种方式，你可以增强SVG图形的视觉效果，并创建令人印象深刻的数据可视化和交互式界面。

扩展你的SVG工具集

不要局限于三角形箭头。利用marker的灵活性，你可以创建任何形状的marker，例如圆圈、方形、星形，甚至是更复杂的形状。将marker与SVG的其他特性相结合，你可以创建无限的图形可能性。

掌握SVG marker的奥秘，释放你的SVG绘制潜能。让你的箭头栩栩如生，让你的SVG图形脱颖而出。

SEO优化