Search code examples
htmlsvgsvg-animate

Svg animation unexpectedly stop in a few minutes

First of all, please look into below snippet, you will see the repeated animations which five balls move along one path.

But unfortunately, you will find the first ball will stop at m0,0 in a few minutes, later, the following balls stop one by one.

Even I ajdusted dur="0.4s" to dur="0.39s", it still had same issue. (I thought it was caused by the bound value of dur).

Updated:

I found the SVG seemed working fine (at least ran 5 hours) in Firefox (latest version).

Google Chrome (latest version) will have the above issue mentioned.

It seems Chrome can't support SVG animation very well.

Updated 2:

For Chrome, it seems only <animateMotion> has the issue, because I ran this SVG with only <animate>, there is not any issue so far (at least two hours).

Thanks.

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>

Below screenshot show two of balls already stop. enter image description here

Solution

  • This was one bug for Chrome (version <= M77). Now it already been fixed since >=M78 (As the Chrome project member mentioned). So upgrade the chrome to latest version then works well.