Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Animating SVG with CSS

Well done!

You have completed Animating SVG with CSS!

Sign up for Treehouse Back to Library

Transform Origin in Firefox

3:16 with Guil Hernandez

Browser support is generally excellent for SVG animations with CSS. However, there is an issue in Firefox with transform-origin and percentage values. You'll commonly see this referred to as the "transform origin bug" in Firefox.

Update

If the rotation appears off-center, apply transform-box: fill-box to your SVG, like so:

.gear-icon,
.hammer-icon,
.heart-icon {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

You can learn more about transform-box on MDN.

Quick Reference

Browser Support

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Browser support is generally excellent for SVG animations with CSS. 0:00
    And except for the default transform origins, 0:04
    there aren't many differences between CSS animations in SVG, and HTML. 0:08
    However, as I'm recording this video, implementations for 0:13
    some features are still inconsistent in some browsers. 0:16
    Particularly in Firefox. 0:20
    Now, there is an issue that happens in Firefox with transform origin and 0:22
    percentage values. 0:26
    You'll commonly see this referred to as the transform origin bug in Firefox. 0:28
    So, I'm going to preview the workspace from the previous video 0:33
    in Firefox to see if there are any differences in the transforms. 0:37
    So, when I hover over the icons 0:41
    notice how the transforms behave a lot different than in Chrome. 0:44
    All rotations and scaling are off center, 0:49
    like we saw earlier in Chrome before we explicitly defined a transform origin. 0:52
    Now there's a reason why this is happening, and 0:57
    it has to do with the transform origin value being set in percentages. 0:59
    Currently, setting transform origin, and percentages, does not work as expected in 1:06
    Firefox, because Firefox doesn't honor percentage based origins for SVG. 1:11
    So to make these transforms work in Firefox, 1:17
    we need to use absolute values, like pixels instead. 1:21
    Now, Firefox won't even recognize keyword base origins, like right bottom, or 1:26
    center center. 1:30
    So, as I mentioned in the previous video. 1:35
    If we set a transform origin value in pixels, 1:38
    the origin will be set relative to the SVG canvas' top left corner. 1:42
    So then, how do we figure out what the center transform 1:47
    origin value is in pixels. 1:51
    Well, in the HTML file, if we look at one of the circle element's 1:53
    attributes notice the cx and cy attributes here. 1:59
    These attributes define the center of the circle element. 2:05
    So the center x coordinate and the center y coordinates. 2:08
    Now, since the icons need to rotate and scale from the center of the circles, 2:13
    I can actually use the cx and 2:18
    cy values to define the icon transform origin and pixels. 2:21
    So, back in my style sheet, 2:26
    I'm going to change this percentage transform origin value. 2:28
    To 200 pixels, 50 pixels. 2:33
    All right, so now we should be good to go. 2:36
    If I save my style sheet, and preview my work space again in Firefox, 2:38
    once I hover over any icon we can see that the transforms are now working 2:43
    just like they do in Chrome. 2:48
    Browser support changes frequently. 2:53
    So be sure to experiment with these properties, 2:55
    to find out which features currently work or don't work, in the latest browsers. 2:56
    I've also posted information on browser support for SVG transitions and 3:01
    transforms, in the teacher's notes. 3:04
    So up next, you're gonna learn how to create an SVG animation sequence 3:07
    in a line drawn animation using CSS key frames and animation properties. 3:11

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up