Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Transitions and Transforms Rotating and Scaling SVG

Posted by Stefan Hoffmann
Stefan Hoffmann
24,811 Points

Rotating and Scaling SVG - Firefox and transform origin does not work as expected

I am here right now:

https://teamtreehouse.com/library/animating-svg-with-css/transitions-and-transforms/rotating-and-scaling-svg

And I have found an issue using transform-origin with firefox.

It does not seem to apply.

I started out a codepen to try it out: http://codepen.io/stho/pen/OVZBpZ

Load it up in chrome, and it will work as expected. Load it up in firefox, and it will not.

I am aware of some stackoverflow response to that question that says, one should redraw the svg so its center point is 0,0 . But I asked myself if there is a more elegant way? After all, if these are icons from the treehouse patch you guys already have the answer around, don't you?

Best regards, Stefan

Gari Merrifield
Gari Merrifield
9,597 Points
Gari Merrifield
Gari Merrifield
9,597 Points

It used to work in Chrome.... I just found that with Chromium 64.0, I was getting the same results as Firefox, so using the cx, cy values at pixel offsets seems to fix the centering.

1 Answer

Stefan Hoffmann
Stefan Hoffmann
24,811 Points

I don't know how to say this, but thanks, thats actually the question that is answered with the next video, isn't it :).

Thanks!