SVG Animation and CSS Transforms: A Complicated Love Story | CSS-Tricks

The latest verstion of GreenSock Animation Platform (GSAP) normalizes behavior of transforms on SVG elements


Guest author Jack Doyle, author of the GreenSock Animation Platform (GSAP) writes: “SVG is all the rage these days, and browser support is generally excellent…with one glaring exception: CSS transforms. This is particularly painful when it comes to animation because scale, position, rotation, and skew are so fundamental. “

Problems include:

– IE and Opera don’t honor CSS transforms at all on SVG elements. Instead, you must assign the value to the transform attribute.

– Firefox doesn’t honor %-based origins.

– Zooming in Safari breaks the sync between %-based and px-based origins.

– Firefox doesn’t recognize keyword-based origins like “right bottom”, and Safari alters them when the zoom is anything but 100%.

– In all browsers, px-based origins are measured differently for SVG elements than other DOM elements (see below).

Read more from the source: CSS-Tricks