使用SMIL实现SVG路径动画：让Div元素沿椭圆轨迹运动

在上面的代码中，我们创建了一个svg元素，并设置了viewbox属性，用于定义svg画布的坐标系统。

2. 创建动画元素

接下来，我们需要创建一个需要动画的元素。在这里，我们使用一个circle元素作为示例，并设置其半径和填充颜色。

<circle r="25" fill="blue">
</circle>

3. 添加<animateMotion>元素

为了让circle元素沿着SVG路径运动，我们需要在circle元素内部添加一个<animateMotion>元素。

<animateMotion
    dur="20s"
    fill="freeze"
    path="M124124.36,344.22c-185.55,458.08-162.36,458.08,69.58,0,246.83-458.08,270.02-458.08,69.58,0-185.55,394.73-162.36,394.73,69.58,0,233.89-394.73,257.08-394.73,69.58,0-185.55,386.61-162.36,386.61,69.58,0,261.83-386.61,285.03-386.61,69.58,0-185.55,292.39-162.36,292.39,69.58,0,242.89-292.39,266.08-292.39,69.58,0-185.55,261.53-131.3,280.39,69.58,0,193.28-261.53,216.47-261.53,69.58,0-185.98,318.28-162.49,409.19,69.59,0,242-448.33,265.19-448.33,69.58" />

在上面的代码中，我们设置了以下属性：

• dur: 动画的持续时间，单位为秒。
• fill: 动画结束后的填充模式。设置为freeze表示动画停留在最后一帧。
• path: 定义动画的路径。这里使用了SVG路径的d属性值。

4. 完整代码

将上面的代码片段组合起来，得到完整的代码如下：

BiLin AI

免费的多语言AI搜索引擎

下载

<section class="mission-statement">
  <svg viewBox="0 0 1100 690" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
    <circle r="25" fill="blue">
      <animateMotion
        dur="20s"
        fill="freeze"
        path="M124124.36,344.22c-185.55,458.08-162.36,458.08,69.58,0,246.83-458.08,270.02-458.08,69.58,0-185.55,394.73-162.36,394.73,69.58,0,233.89-394.73,257.08-394.73,69.58,0-185.55,386.61-162.36,386.61,69.58,0,261.83-386.61,285.03-386.61,69.58,0-185.55,292.39-162.36,292.39,69.58,0,242.89-292.39,266.08-292.39,69.58,0-185.55,261.53-131.3,280.39,69.58,0,193.28-261.53,216.47-261.53,69.58,0-185.98,318.28-162.49,409.19,69.59,0,242-448.33,265.19-448.33,69.58" />
    </circle>
  </svg>
</section>

5. CSS样式

为了更好地展示动画效果，我们可以添加一些CSS样式。

svg {
  height: 90vh;
}

注意事项

• SMIL动画的兼容性虽然不错，但在某些老版本的浏览器中可能无法正常工作。
• 可以使用JavaScript来动态控制SMIL动画的属性，例如开始时间、持续时间和路径等。
• 除了<animateMotion>元素，SMIL还提供了其他动画元素，例如<animate>和<animateTransform>，可以用于实现更复杂的动画效果。

总结

本文介绍了如何使用SMIL技术实现SVG路径动画，通过简单的代码示例，展示了如何让一个div元素沿着指定的SVG路径运动。SMIL是一种强大的动画工具，可以用于创建各种复杂的动画效果。希望本文能够帮助开发者快速掌握SMIL动画的基本用法，并在实际项目中灵活应用。