如何让SVG中的彩色圆点沿对应路径双向变速运动？

完全可以通过纯SVG实现需求，无需JavaScript，以下是具体解决思路和代码示例：

解决圆点消失问题 #

你之前的黄色圆点消失，大概率是以下原因：

• 未将<animateMotion>作为<circle>的子元素，导致动画未绑定到圆点上
• 圆点初始cx/cy未设为0（animateMotion基于元素局部坐标系，设为0才能准确沿路径定位）
• 路径坐标与原SVG路径不匹配，导致圆点被移到可视区域外

双向变速运动实现方案 #

方案1：单animateMotion结合keyTimes控制速率 #

通过keyTimes和values定义往返路径，用时间占比实现不同速率：

<!-- 黄色圆点沿对应路径双向变速运动 -->
<circle cx="0" cy="0" r="5" fill="#f9e716">
  <animateMotion
    dur="15s"          <!-- 总循环时长 -->
    repeatCount="indefinite"
    keyTimes="0;0.4;1" <!-- 去程占40%时长，回程占60%时长 -->
    calcMode="linear"
    values="
      M 281.66783,66.052163 C 223.51504,77.682713 186.22884,130.70438 186.22884,130.70438;
      M 186.22884,130.70438 C 223.51504,77.682713 281.66783,66.052163 281.66783,66.052163;
      M 281.66783,66.052163 C 223.51504,77.682713 186.22884,130.70438 186.22884,130.70438
    "
  />
</circle>

• keyTimes="0;0.4;1"表示去程用总时长的40%，回程用60%，因路程相同，时间占比不同自然实现速率差异
• values中依次定义去程路径、回程路径、回到起点，形成循环

方案2：双animateMotion衔接实现往返 #

分别定义去程和回程动画，通过begin属性衔接触发：

<circle cx="0" cy="0" r="5" fill="#f9e716">
  <!-- 去程动画：6秒完成 -->
  <animateMotion
    id="yellow-go"
    dur="6s"
    repeatCount="1"
    path="m 281.66783,66.052163 c -58.15279,11.63055 -95.43899,64.652217 -95.43899,64.652217"
  />
  <!-- 回程动画：9秒完成，去程结束后自动启动，循环往复 -->
  <animateMotion
    dur="9s"
    repeatCount="indefinite"
    path="m 186.22884,130.70438 c 58.15279,-11.63055 95.43899,-64.652217 95.43899,-64.652217"
    begin="yellow-go.end"
  />
</circle>

• 去程和回程分别设置不同dur值，直接实现速率差异
• 回程动画通过begin="yellow-go.end"绑定到去程结束事件，自动衔接循环

注意事项 #

• 所有路径的d值需严格对应原SVG中对应颜色路径的坐标
• 圆点的cx/cy必须设为0，避免初始位置偏移
• 若需要更细腻的缓动效果，可添加keySplines属性自定义动画曲线

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