Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,584 Points
Gari Merrifield
Gari Merrifield
9,584 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!