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

Question

首先，请查看以下片段，您将看到重复的动画，其中五个球沿着一条路径移动。

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

即使我审问dur="0.4s"到dur="0.39s"，它仍然有同样的问题。 （我认为这是由dur）的绑定值引起的。

更新

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

谷歌浏览器（最新版本）将提到上述问题。

Chrome似乎无法很好地支持SVG动画。

更新2：

对于Chrome，似乎只有<animateMotion>有问题，因为我只用<animate>运行this SVG，到目前为止没有任何问题（至少两个小时）。

感谢。

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升级到最新版本即可正常工作。