How to determine if SVG animation is available

Question

Is there a good way to determine if an SVG animation is available and then configure the DOM correctly?

I am using animateMotion to animate g movement containing image s. This only works in Mozilla; moreover, animateMotion unartitioned leaves images in a different position both in Mozilla and in WebKit (but not in one place in each!).

It seems I need a way to set properties on g and images to work with each script and add the animateMotion tag only if it works. Any suggestions?

Answer 1

Modernizr only detects the existence of a high level and trusts the browser not to lie. For example, Desktop Safari has a big Yes for SMIL from Modernizr. But SMIL is only partially implemented in almost every browser (even Firefox 4!), And you need to check each individual animation of the attributes to determine exactly which one works.

For example, you cannot animate startOffset for text in the path animation in Desktop Safari using SMIL. There is no library that detects the existence of objects for such things.

IMHO, where they exist, you should use CSS transforms / animations for general-purpose animations in everything except IE. For IE, use Javascript animation (or Canvas).

(BTW, animateTransform on Chrome is broken - it calculates translations)

Answer 2

I had this problem with a Samsung phone running Android 4.2.2. It will report the truth for all three of them: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil , but not the animation and clip paths where they messed up. It seems that only one element can have a clip path. In any case, we finished this not very big resolution:

 isAndroid = /Android/.test( navigator.userAgent ); 

Sorry, Android users, you will only see the backup image. This is a terrible fix, but it was only for a simple animation of the logo, so ...

Answer 3

Modernizr discovers SVG animation support (SMIL).

Without a complete example, it is impossible to say exactly what causes the differences.