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 Keyframe and Line Drawing Animations Creating an SVG Animation Sequence

Posted by t0ny
.a{fill-rule:evenodd;}techdegree seal-36
t0ny
Front End Web Development Techdegree Graduate 14,685 Points

Code in the video not displaying correctly in Chrome 85

Code in workspaces and in the video doesn't appear to result in the right animation. Transformation origin is still off and the animation isn't nice. Observed on Chrome 85.

However if svg property was changed to

viewBox="0 0 360 360"

that seems to center the origin correctly. Any idea why?

1 Answer

Adam Pearson
Adam Pearson
19,432 Points

For anyone still struggling with this, it's because Chrome updated how it dealt with the origin of SVGs since the videos came out. Firefox had it right all along, and Chrome just fixed their implementation.

If you do it like so:

.badge * { transform-origin: 50% 50%; transform-box: fill-box; }

Then it will work again. The transform-box: fill-box; rule will set the object's bounding box as the reference box for your transform-origin

Suan Choi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Suan Choi
Front End Web Development Techdegree Graduate 16,587 Points
Suan Choi
.a{fill-rule:evenodd;}techdegree seal-36
Suan Choi
Front End Web Development Techdegree Graduate 16,587 Points

Thank you so much! I was struggling to figure it out even from the previous videos. So now the "Firefox issue" is the new standard that we follow I assume?