Svg 动画在几分钟后意外停止

Question

首先，请看下面的代码片段，您会看到五个球沿一条路径移动的重复动画。

但不幸的是，几分钟后你会发现第一个球会停在m0,0，之后，后面的球一个一个停

即使我将 dur="0.4s" 调整为 dur="0.39s"，它仍然有同样的问题。（我还以为是dur的绑定值引起的）

更新：

我发现 SVG 在 Firefox（最新版本）中似乎工作正常（至少运行 5 小时）。

GoogleChrome（最新版）会有上述问题

好像Chrome不能很好地支持SVG动画

更新2：

对于Chrome，好像只有<animateMotion>有问题，因为我运行this SVG只有<animate>，没有任何问题所以远（至少两个小时）。

谢谢。

svg{
 width:50%;
 height:50%;
}

<svg fill="#435063" viewBox="0 0 64 64">
  <g>
    <path d="m-40,0 q-8, -7, 0, -15 l40, 0 l0,15"
          stroke="#529fd9" stroke-width="1" fill="none" id="route1"></path>
    <path d="m0,0 l-40, 0" stroke="#529fd9" stroke-width="1" fill="none" id="route2"></path>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="a1" dur="1.6s" begin="0s;a1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="a1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="a1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="a1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="b1" dur="1.6s" begin="0.4s;b1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="b1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="b1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="b1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="c1" dur="1.6s" begin="0.8s;c1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="c1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="c1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="c1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="d1" dur="1.6s" begin="1.2s;d1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="d1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="d1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="d1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="e1" dur="1.6s" begin="1.6s;e1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="e1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="e1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="e1.end+0.05s" dur="0.32s"
            />
    </ellipse>
  </g>
</svg>

下面的截图显示两个球已经停止了。

Answer 1

这是 Chrome 的一个错误（版本 <= M77）。现在它已经从 >=M78 (As the Chrome project member mentioned) 开始修复。所以将 chrome 升级到最新版本就可以正常工作了。

Svg 动画在几分钟后意外停止

Svg animation unexpectedly stop in a few minutes

html

svg

svg-animate