I’ve recently been working a lot with animating SVG graphics. In order to do this I’ve been using CSS3 Animations. By inlining SVGs directly in my HTML document, I simply use CSS to target SVG nodes and apply @keyframe animations as required.
This technique has worked well across all my target platforms with one exception – Internet Explorer 11.
The Problem
Whilst most modern, evergreen browsers are happy to animate SVGs perfectly using CSS, in IE11, some animations simply do not work. Looking into this in detail, I’ve managed to determine that the problem only manifests itself with SVGs that have their paths animated using keyframes that manipulate CSS transforms.
What’s the problem with animating SVGs using CSS transforms
It turns out that whilst IE is happy to animate SVGs using most CSS properties, it is not able to handle the animation of transform‘s on SVGs. This issue is in fact documented, but it certainly wasn’t something I was aware of.
In short, IE11 supports animating SVG through the SVG transform attribute but not through the near-identical CSS transform property.
For me this meant half my animations simply did not work on IE11 as they relied on translating (a type of transform) elements in their CSS keyframe animations.
A “Solution”
Unfortunately IE11 cannot and will not respect CSS transforms on SVG elements. There is no silver bullet for this.
However, given that IE11 respects the transform attribute, it is possible to achieve the same result via JavaScript. Essentially we can parse the CSS transform property being applied to the SVG and convert it into an attribute:
var g= document.querySelector('g'),
transform= getComputedStyle(g).getPropertyValue('transform');
g.setAttribute('transform', transform);Unfortunately however, that’s not the end of the story as whilst the above solution does work,you still need to rewrite all your animations using JS instead of CSS key frames. Moreover there are also a number of edge cases and gotchas when animating transform attributes on SVGs. Not least amongst these is that SVG transform origin is not the same as CSS transform origin.
As a result, achieving even the most simple of animations – rotating around an object’s centre for example – becomes a complex process of manipulating x/y attributes in tandem with the SVG transform origin. A real nightmate.
To me this all feels like far too much work…especially when we have clients who need their animations working in IE11 yesterday.
A better option for (reliably) animating SVGs
Ultimately if you want to save yourself a lot of pain I would recommend looking at the Greensock HTML5 Animation library for working with anything but the most simple SVG animations.
Whilst other solutions do exist, Greensock is a fully-featured framework for animating not only SVG but also HTML DOM elements.
It provides a clean, intuative and powerful API which allows you to create complex animations sequences with far greater ease than CSS. Whats more, Greensock also normalises all the inconsistencies you might encounter when animating SVGs, leaving you free to focus on crafting your animations.
The one downside is that Greesock is quite heavy but given that it is fully modular you should be able to cherry pick only those features you actually require to realise your animations.
Have a better solution? Let me know in the comments.