使用 SMIL 和 animateMotion 实现 SVG 路径动画

本文将介绍如何使用 smil（synchronized multimedia integration language）和 `` 元素，在 html 中实现一个 div 元素沿着指定的 svg 路径进行椭圆形状的动画。我们将通过一个具体的示例，详细讲解如何定义 svg 路径，并将其应用于 `` 元素，使其沿着路径平滑移动。同时，我们还将探讨 smil 的浏览器支持情况，以及其他相关的学习资源。

### 实现 SVG 路径动画 实现元素沿 SVG 路径动画效果的一种方法是使用 SMIL 和 `` 元素。SMIL 是一种 XML 标记语言，用于描述多媒体演示的同步。`animateMotion` 元素允许我们沿着 SVG 路径移动元素。 **示例代码：** 以下是一个完整的示例，展示了如何使用 SMIL 和 `` 来实现一个圆形沿着 SVG 路径运动的动画： ```html

代码解释：

1. 定义了 SVG 画布，并设置了 viewBox 属性，以便更好地控制 SVG 的缩放和比例。
2. 元素: 定义了一个半径为 25 的蓝色圆形。
3. 元素: 这是实现动画的关键。
   • dur="20s": 设置动画的持续时间为 20 秒。
   • fill="freeze": 指定动画结束后，圆形停留在动画的最后一帧。如果不设置此属性，圆形将返回到动画的起始位置。
   • path="...": 定义了圆形运动的路径。这是一个 SVG 路径字符串，描述了椭圆的形状。

CSS 样式:

svg {
  height: 90vh;
}

这段 CSS 代码设置了 SVG 元素的高度，使其占据浏览器视口高度的 90%。

SMIL 的浏览器支持

SMIL 具有良好的浏览器支持，即使 Chrome 曾经弃用，后来又重新支持了它。它甚至可以在 标签中使用，并且在许多浏览器中可以作为 CSS 的 background-image 使用。

进一步学习

• CSS-Tricks 的 SVG 动画指南： https://www./link/e1d96dd51f6c61a48b3af39333626766
• MDN Web Docs 的 SVG 动画文档： https://www./link/4d5c3e59543d48a0ea6152d4bad9a10d

总结：

通过使用 SMIL 和 元素，我们可以轻松地实现元素沿着 SVG 路径运动的动画效果。这种方法简单易懂，并且具有良好的浏览器支持。希望本教程能够帮助你理解和掌握 SVG 路径动画的实现方法。