循环时如何防止 SVG 中的动画缓动/延迟？

Question

例如，我想制作一个 SVG 加载器 动画。

我在循环时得到了一些过渡/缓和/延迟（我不知道该叫什么抱歉）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 100">
  <circle id="a1" cx="70" cy="70" r="20"/>
  <circle id="a2" cx="120" cy="70" r="20"/>
  <circle id="a3" cx="170" cy="70" r="20"/>
  <circle id="a4" cx="220" cy="70" r="20"/>
  <circle id="a5" cx="270" cy="70" r="20"/>
  <circle id="a6" cx="320" cy="70" r="20"/>
  <circle id="a7" cx="370" cy="70" r="20"/>
  <circle id="a8" cx="420" cy="70" r="20"/>
  <circle id="a9" cx="470" cy="70" r="20"/>
  <circle id="a10" cx="520" cy="70" r="20"/>
  <animate xlink:href="#a1" attributeName="visibility" from="hidden" to="visible" begin="0.1s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a2" attributeName="visibility" from="hidden" to="visible" begin="0.2s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a3" attributeName="visibility" from="hidden" to="visible" begin="0.3s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a4" attributeName="visibility" from="hidden" to="visible" begin="0.4s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a5" attributeName="visibility" from="hidden" to="visible" begin="0.5s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a6" attributeName="visibility" from="hidden" to="visible" begin="0.6s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a7" attributeName="visibility" from="hidden" to="visible" begin="0.7s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a8" attributeName="visibility" from="hidden" to="visible" begin="0.8s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a9" attributeName="visibility" from="hidden" to="visible" begin="0.9s" dur="1s" repeatCount="indefinite" />
  <animate xlink:href="#a10" attributeName="visibility" from="hidden" to="visible" begin="1s" dur="1s" repeatCount="indefinite" />
</svg>

看看这个演示：动画完成后那些点不会消失。

我只想显示点运行（一个点）（当前演示显示大约 4 个点运行）

我该怎么办，我缺少什么？

Answer 1

啊哈，我想我是通过 value

得到的

示例：（10 个步骤）

values="visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 100">
  <circle id="a1" cx="70" cy="70" r="20"/>
  <circle id="a2" cx="120" cy="70" r="20"/>
  <circle id="a3" cx="170" cy="70" r="20"/>
  <circle id="a4" cx="220" cy="70" r="20"/>
  <circle id="a5" cx="270" cy="70" r="20"/>
  <circle id="a6" cx="320" cy="70" r="20"/>
  <circle id="a7" cx="370" cy="70" r="20"/>
  <circle id="a8" cx="420" cy="70" r="20"/>
  <circle id="a9" cx="470" cy="70" r="20"/>
  <circle id="a10" cx="520" cy="70" r="20"/>
  <animate xlink:href="#a1" attributeName="visibility" begin="0s" dur="1.3s" values="visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a2" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a3" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a4" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a5" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a6" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a7" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a8" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a9" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;" calcMode="linear" repeatCount="indefinite" />
  <animate xlink:href="#a10" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;" calcMode="linear" repeatCount="indefinite" />
</svg>

循环时如何防止 SVG 中的动画缓动/延迟？

How to prevent animation easing / delay in SVG when looping?

animation

svg

timing