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

Question

我正在玩CSS动画SVG元素并且遇到了这样的问题,即使所有使用的技术都被某些浏览器支持,但组合不是,即 - CSS动画DIV是工作但SVG元素不支持.我想知道是否有办法检测浏览器是否能够SVG使用动画元素CSS.

这是一个jsFiddle的例子.它适用于最新版本的Chrome,Firefox和Safari.但是当用例如Firefox 5打开它时,只有div旋转而rect不是.

Answer 1

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

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

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