SVG小球沿路径动画：多组动画路径冲突问题求助

所有圆点都沿第一个路径运动的核心问题是ID全局重复：两个SVG中的路径都使用了id="wire"，而ID在整个HTML文档中必须唯一，第二个SVG里的<mpath>会优先匹配页面中第一个出现的#wire路径。

给每个SVG内的路径设置唯一ID，并让对应<mpath>的xlink:href指向自身SVG内的路径ID。修改后的完整代码如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="3000" height="400"  viewBox="0 0 3000 400">
  <path d="M0,58.5c201.2,0,296.3,141.4,498.4,141.4S801.6,58.5,999.8,58.5s302.9,141.4,500.2,141.4
    s306.3-141.4,502.5-141.4s305.2,141.4,499.4,141.4c194.2,0,299.2-141.4,498.1-141.4"
        stroke="#444444" stroke-width="2" fill="none" id="wire1"></path>
  <circle cx="" cy="" r="8" fill="#444444">
    <animateMotion dur="10s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.4 0.8 0.9">
      <mpath xlink:href="#wire1"></mpath>
    </animateMotion>
  </circle>
  <circle cx="" cy="" r="4" fill="#444444">
    <animateMotion dur="5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.2 0.8 0.9">
      <mpath xlink:href="#wire1"></mpath>
    </animateMotion>
  </circle>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="3000" height="400"  viewBox="0 0 3000 400">
  <path d="M0,135.5c501.6-4.4,502.9,150.6,1004.5,146.2c501.6-4.4,500.2-159.3,1001.8-163.7
    c501.6-4.4,502.9,150.6,1004.5,146.2"
        stroke="#222222" stroke-width="2" fill="none" id="wire2"></path>
  <circle cx="" cy="" r="8" fill="#222222">
    <animateMotion dur="10s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.4 0.8 0.9">
      <mpath xlink:href="#wire2"></mpath>
    </animateMotion>
  </circle>
  <circle cx="" cy="" r="4" fill="#222222">
    <animateMotion dur="5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.1 0.2 0.8 0.9">
      <mpath xlink:href="#wire2"></mpath>
    </animateMotion>
  </circle>
</svg>

关键修改说明 #

• 为两个SVG的路径分别设置唯一ID：wire1和wire2
• 每个SVG内的<mpath>都指向自身SVG内的路径ID，确保动画绑定到正确的路径
• 修正了SVG动画标签的规范写法：将小写<animatemotion>改为驼峰式<animateMotion>（部分浏览器兼容小写，但规范写法能避免潜在兼容性问题）

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