Menu
I'm new to animating SVGs & I've come across a problem that only seems to happen in Firefox. I've created a animation here - http://codepen.io/iamali/pen/txvpo - of a sky scene. The sun should rotate & fade in & out.
It works fine in Chrome, but for some reason it appears to ignore the transform-origin value in Firefox and the sun goes AWOL. Does anyone know of such an issue in Firefox? Or could it be anything else? I've tried Google all sorts of terms but there doesn't seem to be much out there on it.
Thanks!
843
Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet. Show activity on this post. Inline you would do it like this: x-axis flip : transform="scale(-1 1)"
The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y) .
By default, the origin of a transform is “50% 50%”, which is exactly in the center of any given element. Changing the origin to “top left” (as in the demo above) causes the element to use the top left corner of the element as a rotation point.
transform-origin with percentage units works from Firefox 43 onwards.
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
