css - 检测浏览器对 CSS 动画 SVG 的支持

Question

我正在使用 CSS 动画 SVG 元素并遇到一个问题，即使使用的所有技术都受到某些浏览器的支持，但组合是不是，即 CSS-animated DIV 有效，但 SVG 元素无效。我想知道是否有一种方法可以检测浏览器是否能够使用 CSS 为 SVG 元素设置动画。

Here is a jsFiddle举个例子。它适用于最新版本的 Chrome、Firefox 和 Safari。但是当用例如打开它时Firefox 5 只有 div 旋转而 rect 不旋转。

Answer 1

您可以添加一个事件监听器来检查动画迭代是否完成，并在相应的事件处理程序中设置一个标志，如 supportsSVGKeyFramedAnimatedProps = true(如果迭代从未完成则它没有动画).

elem.addEventListener('animationiteration', eventHandler, false)

这将允许您“后退”到您的 SVG 动画，而不是提供后备。