Detect browser support for CSS-animated SVG

Question

I am playing around with CSS-animated SVG elements and came across the problem that even though all technologies, which are used, are supported by some browsers the combination is not, i.e. CSS-animated DIVs work but SVG elements don't. I am wondering if there is a way to detect if a browser is capable of animating SVG elements using CSS.

Here is a jsFiddle with an example. It works in the latest versions of Chrome, Firefox and Safari. But when opening it with e.g. Firefox 5 only the div rotates while the rect doesn't.

Answer 1

You can add an event listener to check for the completion of an animation iteration, and within the corresponding event handler set a flag like supportsSVGKeyFramedAnimatedProps = true (if the iteration never completes then it is not animating).

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

This would allow you to 'fall forward' to your SVG animation, instead of providing a fallback.