Transform Origin in Firefox

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