1
00:00:00,160 --> 00:00:04,800
Browser support is generally excellent for
SVG animations with CSS.

2
00:00:04,800 --> 00:00:08,060
And except for
the default transform origins,

3
00:00:08,060 --> 00:00:13,480
there aren't many differences between
CSS animations in SVG, and HTML.

4
00:00:13,480 --> 00:00:16,760
However, as I'm recording this video,
implementations for

5
00:00:16,760 --> 00:00:20,310
some features are still
inconsistent in some browsers.

6
00:00:20,310 --> 00:00:22,090
Particularly in Firefox.

7
00:00:22,090 --> 00:00:26,770
Now, there is an issue that happens
in Firefox with transform origin and

8
00:00:26,770 --> 00:00:28,050
percentage values.

9
00:00:28,050 --> 00:00:33,700
You'll commonly see this referred to
as the transform origin bug in Firefox.

10
00:00:33,700 --> 00:00:37,700
So, I'm going to preview
the workspace from the previous video

11
00:00:37,700 --> 00:00:41,970
in Firefox to see if there are any
differences in the transforms.

12
00:00:41,970 --> 00:00:44,690
So, when I hover over the icons

13
00:00:44,690 --> 00:00:49,420
notice how the transforms behave
a lot different than in Chrome.

14
00:00:49,420 --> 00:00:52,570
All rotations and scaling are off center,

15
00:00:52,570 --> 00:00:57,180
like we saw earlier in Chrome before we
explicitly defined a transform origin.

16
00:00:57,180 --> 00:00:59,650
Now there's a reason why
this is happening, and

17
00:00:59,650 --> 00:01:05,279
it has to do with the transform origin
value being set in percentages.

18
00:01:06,290 --> 00:01:11,630
Currently, setting transform origin, and
percentages, does not work as expected in

19
00:01:11,630 --> 00:01:17,860
Firefox, because Firefox doesn't honor
percentage based origins for SVG.

20
00:01:17,860 --> 00:01:21,870
So to make these transforms
work in Firefox,

21
00:01:21,870 --> 00:01:26,100
we need to use absolute values,
like pixels instead.

22
00:01:26,100 --> 00:01:30,425
Now, Firefox won't even recognize keyword
base origins, like right bottom, or

23
00:01:30,425 --> 00:01:31,300
center center.

24
00:01:35,170 --> 00:01:38,330
So, as I mentioned in the previous video.

25
00:01:38,330 --> 00:01:42,660
If we set a transform
origin value in pixels,

26
00:01:42,660 --> 00:01:47,950
the origin will be set relative to
the SVG canvas' top left corner.

27
00:01:47,950 --> 00:01:51,800
So then, how do we figure out
what the center transform

28
00:01:51,800 --> 00:01:53,880
origin value is in pixels.

29
00:01:53,880 --> 00:01:59,240
Well, in the HTML file,
if we look at one of the circle element's

30
00:01:59,240 --> 00:02:05,040
attributes notice the cx and
cy attributes here.

31
00:02:05,040 --> 00:02:08,720
These attributes define
the center of the circle element.

32
00:02:08,720 --> 00:02:13,020
So the center x coordinate and
the center y coordinates.

33
00:02:13,020 --> 00:02:18,550
Now, since the icons need to rotate and
scale from the center of the circles,

34
00:02:18,550 --> 00:02:21,070
I can actually use the cx and

35
00:02:21,070 --> 00:02:26,350
cy values to define the icon
transform origin and pixels.

36
00:02:26,350 --> 00:02:28,670
So, back in my style sheet,

37
00:02:28,670 --> 00:02:33,030
I'm going to change this
percentage transform origin value.

38
00:02:33,030 --> 00:02:36,420
To 200 pixels, 50 pixels.

39
00:02:36,420 --> 00:02:38,710
All right, so now we should be good to go.

40
00:02:38,710 --> 00:02:43,502
If I save my style sheet, and
preview my work space again in Firefox,

41
00:02:43,502 --> 00:02:48,380
once I hover over any icon we can see
that the transforms are now working

42
00:02:48,380 --> 00:02:50,380
just like they do in Chrome.

43
00:02:53,130 --> 00:02:55,090
Browser support changes frequently.

44
00:02:55,090 --> 00:02:56,950
So be sure to experiment
with these properties,

45
00:02:56,950 --> 00:03:01,110
to find out which features currently work
or don't work, in the latest browsers.

46
00:03:01,110 --> 00:03:04,730
I've also posted information on browser
support for SVG transitions and

47
00:03:04,730 --> 00:03:06,279
transforms, in the teacher's notes.

48
00:03:07,310 --> 00:03:11,530
So up next, you're gonna learn how
to create an SVG animation sequence

49
00:03:11,530 --> 00:03:15,470
in a line drawn animation using CSS
key frames and animation properties.