使用SMIL实现SVG路径动画：让Div元素沿椭圆轨迹运动-js教程-PHP中文网

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

霞舞

发布： 2025-10-18 13:25:01

原创

524人浏览过

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

<p>本文将介绍如何使用SMIL（Synchronized Multimedia Integration Language）技术，结合HTML、CSS和JavaScript，实现让一个div元素沿着指定的SVG路径，以椭圆形状进行动画运动的效果。我们将详细讲解SMIL动画的实现方式，包括SVG路径的定义、动画元素的创建以及关键属性的设置，并提供完整的代码示例，帮助开发者快速掌握这种动画技巧。</p> ### SMIL动画简介 SMIL是一种XML标记语言，用于描述多媒体演示的同步行为。在SVG中，SMIL可以用来创建各种动画效果，例如移动、缩放、旋转和颜色变化等。虽然SMIL曾一度被Chrome浏览器弃用，但后来又被恢复支持，因此仍然是一种可行的动画方案。 ### 实现步骤 1. **创建SVG画布和路径** 首先，我们需要创建一个SVG画布，并在其中定义一个路径。这个路径将作为div元素运动的轨迹。 ```html <section class="mission-statement"> <svg viewBox="0 0 1100 690" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"> </svg> </section>

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

创建动画元素

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

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

登录后复制

添加<animateMotion>元素

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

<animateMotion
    dur="20s"
    fill="freeze"
    path="M124.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属性值。

完整代码

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

Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

145

查看详情

<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="M124.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>

登录后复制

CSS样式

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

svg {
  height: 90vh;
}

登录后复制

注意事项

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