CSS背景SVG动画只会播放一次。

Question

我有一个按钮，可以在两个状态之间切换，每个状态都有一个内联SVG。这些SVG都有一个animate。第一次播放动画时，它可以正常播放。但是，再次在状态之间切换时，动画不会播放。我认为这是由于缓存的原因，但我不完全确定。

我还应该注意到，我正在为网站制作一个UserCSS主题，并且希望尽可能避免使用JavaScript。

- aubymori

---

我遇到了同样的问题，还没有解决办法吗？ - undefined

我使用了这个解决方案 https://stackoverflow.com/a/21394901/8175165。我使用了React函数组件，所以代码看起来像这样： {isSuccess && <object type="image/svg+xml" data="/assets/img/success.svg"></object>} - undefined

@WayneMao 很高兴这对你有效，但正如我在原帖中所述，我希望避免使用JS。不幸的是，看起来这可能是不可能的... - undefined

那个解决方案不使用JS，而是使用<object />。 - undefined

@WayneMao 无论如何，它使用的东西不是CSS，所以我不能使用它。 - undefined

Answer 1

在编写动画时，您应该使用animation-iteration-count: infinite;来实现无限循环播放。

- webworm84

---

我没有使用CSS动画...而是使用了SVG的animate元素。此外，即使我将其无限重复，它也只会一遍又一遍地播放动画，而不是在您切换按钮时播放。 - aubymori

如果您使用 animate 元素，则可以使用 repeatCount 属性。例如 repeatCount:indefinite 或 repeatCount:5。 - webworm84

这有我上面提到的问题。动画会一遍又一遍地播放，而不是每次切换只播放一次。 - aubymori

也许这个链接对您有用。它提到了如何在没有任何脚本的情况下使用动画切换svg https://codepen.io/mikemjharris/post/svg-toggling - webworm84

SVG已经有了animate标签。问题在于它只会播放一次，我猜测是缓存的原因。无限重复也无法解决这个问题。 - aubymori