SVG mpath 元素介绍

SVG（Scalable Vector Graphics）是一种可缩放矢量图形格式，可用于创建高质量的静态和交互式图形。SVG 1.1 版本引入了 mpath 元素，它是一个定义路径动画的子元素。

mpath 元素概述

<mpath> 元素定义了 <animateMotion> 动画的路径。当动画元素开始播放时，它将遵循 <mpath> 元素指定的路径进行移动，而不是沿着线性路径或自由移动。 与其他 SVG 元素不同，<mpath> 必须作为 <animateMotion> 的子元素使用。

使用示例

下面是一个简单的示例，展示如何在 SVG 中使用 <mpath> 元素：

<svg width="300" height="300">
  <path id="path" d="M 50,150 A 100,100 0 1 0 250,150 A 100,100 0 1 0 50,150" fill="none" stroke="#ccc" stroke-width="2" />
  <circle cx="50" cy="150" r="10" fill="red">
    <animateMotion dur="4s" repeatCount="indefinite">
      <mpath xlink:href="#path" />
    </animateMotion>
  </circle>
</svg>

在上面的示例中，我们创建了一个 path 元素作为运动路径，并在其上定义了两个圆形的顶点。然后，我们在第一个圆形上定义了 animateMotion 元素，并将其 duration 设置为 4s，以保持我们的动画持续时间。 最后，我们将 mpath 元素的 xlink:href 属性设置为我们之前定义的 path 元素 ID。

兼容性

<mpath> 元素仅适用于支持 SVG 1.1 规范的浏览器。

结论

<mpath> 元素为 SVG 提供了一种更灵活的动画方式，无需编写复杂的动画路径，可以通过简单的路径定义来实现。虽然该元素仅在少数浏览器中得到支持，但它提供了一个强大的工具，使得 SVG 动画的实现更加可控和易于维护。