如何用HTML、CSS、JavaScript实现Div沿指定SVG路径往复椭圆动画？

需求说明 #

需要让class为ellipse的div元素，沿id为motionPath的SVG路径持续、平滑地往复运动，现有基础HTML结构如下：

<section class="mission-statement">
  <svg class="vector" xmlns="http://www.w3.org/2000/svg" width="1650" height="721" viewBox=" 0 0 1650 821"><g clip-path="url(#a)"><path id="motionPath" stroke="#fff" stroke-linecap="round" stroke-opacity=".6" stroke-width="1.5" d="M1728 410.5c-264.11 443.383-336.42 443.383-125.14 0 164.7-247.83 138.29-247.83-79.23 0-264.11 247.83-290.52 247.83-79.23 0 202.21-226.532 175.8-226.532-79.23 0-264.11 226.532-290.52 226.532-79.24 0 330.48-482.106 304.07-482.106-79.23 0-264.108 482.106-290.519 482.106-79.23 0 222.74-534.383 196.33-534.383-79.23 0-264.113 534.383-290.524 534.383-79.237 0 167.267-311.723 140.857-311.723-79.232 0-264.109 311.723-290.52 311.723-79.233 0 223.752-348.51 197.342-348.51-79.233 0-264.108 348.511-290.519 348.511-79.232 0C897.4-50.309 870.99-50.309 572.84 410.5c-264.108 460.809-290.519 460.809-79.232 0 213.506-470.49 187.095-470.49-79.233 0-264.108 470.489-290.519 470.489-79.232 0 228.242-546 201.831-546-79.233 0-264.108 546-290.52 546-79.233 0C365.112-17.394 241.257-17.394 0 410.5"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h1728v821H0z"/></clipPath></defs></svg>
  <div class="ellipse"></div>
</section>

实现方案 #

方案一：原生SVG+JS+CSS实现 #

无需依赖外部库，利用SVG原生动画元素配合JS监听位置：

1. 修改SVG，添加辅助动画元素
   在SVG的<g>标签内添加一个透明的辅助圆形，用于沿路径运动：

<circle id="path-guide" r="0" fill="transparent">
  <animateMotion
    dur="10s"          <!-- 单次运动时长 -->
    repeatCount="indefinite" <!-- 无限循环 -->
    path="M1728 410.5c-264.11 443.383-336.42 443.383-125.14 0 164.7-247.83 138.29-247.83-79.23 0-264.11 247.83-290.52 247.83-79.23 0 202.21-226.532 175.8-226.532-79.23 0-264.11 226.532-290.52 226.532-79.24 0 330.48-482.106 304.07-482.106-79.23 0-264.108 482.106-290.519 482.106-79.23 0 222.74-534.383 196.33-534.383-79.23 0-264.113 534.383-290.524 534.383-79.237 0 167.267-311.723 140.857-311.723-79.232 0-264.109 311.723-290.52 311.723-79.233 0 223.752-348.51 197.342-348.51-79.233 0-264.108 348.511-290.519 348.511-79.232 0C897.4-50.309 870.99-50.309 572.84 410.5c-264.108 460.809-290.519 460.809-79.232 0 213.506-470.49 187.095-470.49-79.233 0-264.108 470.489-290.519 470.489-79.232 0 228.242-546 201.831-546-79.233 0-264.108 546-290.52 546-79.233 0C365.112-17.394 241.257-17.394 0 410.5"
    autoReverse="true" <!-- 开启往复运动 -->
  />
</circle>

2. 添加CSS定位样式
   让.ellipse绝对定位，确保它能跟随辅助元素移动：

.mission-statement {
  position: relative;
  overflow: hidden; /* 防止div超出容器 */
}
.ellipse {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff4444; /* 自定义椭圆样式 */
  transform: translate(-50%, -50%); /* 让div中心对齐路径 */
}

3. JS实时更新位置
   通过requestAnimationFrame监听辅助元素的位置，同步更新div的坐标：

const guideEl = document.getElementById('path-guide');
const ellipseEl = document.querySelector('.ellipse');
const containerEl = document.querySelector('.mission-statement');

function syncPosition() {
  const guideRect = guideEl.getBoundingClientRect();
  const containerRect = containerEl.getBoundingClientRect();
  
  // 计算相对容器的坐标
  ellipseEl.style.left = `${guideRect.left - containerRect.left + guideRect.width / 2}px`;
  ellipseEl.style.top = `${guideRect.top - containerRect.top + guideRect.height / 2}px`;
  
  requestAnimationFrame(syncPosition);
}

// 启动同步
syncPosition();

方案二：使用动画库简化实现 #

如果追求更简洁的代码和更灵活的动画控制，推荐使用专业动画库：

1. GSAP（GreenSock）

GSAP对路径动画的支持非常完善，代码极简：

// 初始化动画
gsap.to('.ellipse', {
  motionPath: {
    path: '#motionPath', // 指定路径元素
    align: '#motionPath',
    alignOrigin: [0.5, 0.5] // 让div中心对齐路径
  },
  duration: 10, // 单次时长（秒）
  repeat: -1, // 无限循环
  yoyo: true, // 往复运动
  ease: 'linear' // 匀速运动，保证平滑
});

2. anime.js

轻量动画库，语法简洁：

anime({
  targets: '.ellipse',
  // 从路径中获取x、y坐标
  translateX: anime.path('#motionPath')('x'),
  translateY: anime.path('#motionPath')('y'),
  duration: 10000, // 单次时长（毫秒）
  loop: true, // 无限循环
  direction: 'alternate', // 往复运动
  easing: 'linear'
});

关键注意点 #

• 确保SVG的viewBox与容器尺寸匹配，避免位置偏移
• 原生方案中，requestAnimationFrame保证60fps的平滑更新
• 库方案无需手动处理坐标计算，还能轻松调整速度曲线、延迟等参数

内容的提问来源于stack exchange，提问作者user20900621