Preview
Video Player
00:00
00:00
Transform Origin in Firefox
3:16Browser 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.
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