Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Quick Reference
Related Videos
Browser Support
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