Preview
Video Player
00:00
00:00
Grouping and Transforming SVG
6:30Transforming SVG elements with CSS is similar to transforming HTML elements with CSS. You can rotate, scale, skew and translate SVGs using the transform property. In this video, you'll learn how to group SVG shapes and rotate them from a center origin.
Once you've launched the latest
workspace for this video, and
0:00
open a stylesheet, you'll notice
that I've removed the fill color and
0:02
stroke transitions we created
in the previous lesson.
0:06
So, now, we're going to focus on
the different ways we can manipulate SVG
0:09
elements using CSS transforms.
0:13
Transforming SVG elements with CSS,
0:16
is pretty much the same as
transforming HTML elements with CSS.
0:18
We can rotate, scale, skew, and translate
SVGs using the transform property.
0:23
So, now I wanna create different
transforms that rotate and
0:29
scale these icons when
you hover over them.
0:33
So, first In my HTML file,
0:37
I'm going to group the circle and
path elements nested inside each SVG.
0:40
And I'll do that using the g element.
0:45
So, in my gear icon,
0:49
right above the first circle element,
I'm going to add a g element.
0:51
Now the g element is a container
used to group SVG shapes together.
0:57
So, I'm going to give this
g element the class gear.
1:03
Since SVG is written in XML,
all elements must be properly closed.
1:09
So, right above the closing SVG tag
I'll go ahead and add the closing g tag.
1:14
Once SVG elements are grouped like this,
1:24
you can transform the entire
group as a single object.
1:27
And you'll learn more about
that in the next stage.
1:30
Right now, I'm using the g element so
that when we hover over it,
1:33
it will apply a transform and
transition to the nested icons.
1:38
So next I'll scroll down and
1:43
group the circle and path elements
nested inside the hammer icon.
1:45
So once again, right above the circle
element, I'll add a g element.
1:50
And I'll give this one a class of hammer.
1:55
Then right above its closing SVG tag,
I'll add the closing g tag.
2:00
Finally, I'll group the circle and
path elements nested inside the heart SVG.
2:08
So I'll add a g tag above the circle,
and I'll give this one a class of heart.
2:15
And I'll add its closing tag
right above the closing SVG tag.
2:23
All right, so now I'm ready
to write my transform styles.
2:29
I'll save my index.html file, and back in
my stylesheet, under the gear comment,
2:32
I'm going to create a new rule by
writing a descendent selector that
2:39
targets the gear icon element,
once the gear element is hovered.
2:44
So first I'm going to target gear on hover
and then I'll target the class gear-icon.
2:48
Inside this rule,
I'll add a transform property and
2:58
I want to rotate the icon
45 degrees clockwise.
3:02
So, I'm going to define a rotate function,
and set the rotation to 45 degrees.
3:06
Next, I'm going to use the scale
function to scale the element
3:13
1.3 times its original size.
3:17
So, what's a rotation, and a scale without
a smooth transition effect, right?
3:20
So, to transition these transform
functions on both the hover on, and
3:23
hover off states, I'm going to apply
a transition to the gear icon element.
3:28
So I'll target gear icon,
then I'll add a transition
3:34
property, and
I wanna target the transform property.
3:39
So I'll define that first, then I'll set
the transition duration to 0.4 seconds,
3:44
and the timing function to ease out.
3:49
So, SVG transforms with CSS generally
behave the same way they do with
3:53
HTML elements, except for one noticeable
exception, the transform origin.
3:57
So if I save my stylesheet and
4:03
take a look at this in the browser,
notice how the rotation is off center.
4:05
And it's not scaling evenly on the x and
y axis.
4:10
So let's take a look at
why this happens in SVG.
4:14
SVG handles transform origins
differently than HTML elements.
4:18
This makes transforming
them a bit trickier.
4:22
You see, the default transform
origin of an HTML element is 50%,
4:24
50% which is the element's center.
4:30
So everything transforms
around this point.
4:33
But, an SVG's default
origin value is the 0,
4:36
0 point, or
the top left corner of the SVG canvas.
4:41
Now the canvas is the area
where the SVG is drawn.
4:45
So the top left transform origin
causes elements to transform
4:49
around that point instead of the center.
4:54
So, for example, when we're
rotating our icon by 45 degrees,
4:57
instead of rotating
around its center origin,
5:01
it's swinging around the top
left corner of the SVG canvas.
5:05
And it's also scaling from that
top left corner of the svg canvas.
5:10
So if you want to transform an SVG element
from its center, you need to explicitly
5:15
set the element's transform origin to the
center with the transform origin property.
5:20
So back in my stylesheet,
in the gear-icon rule,
5:25
I'm going to add
a transform-origin property,
5:30
and set the value to 50% 50%,
5:34
which moves the origin to
the center of the element.
5:37
So when we set a transform
value in percentages,
5:42
the value is set relative to
the shape element's bounding box.
5:46
Now the shape's bounding box is similar
to the border area of an HTML element.
5:50
So that's the area highlighted
here by the Chrome dev tools.
5:56
However, if we set a transform
origin value in pixels,
6:00
the origin will be set relative to
the SVG canvas's top left corner.
6:05
And you'll learn more about that,
in the next video.
6:10
So now that I've set the gear icon's
transform origin value to 50% 50%, or
6:12
the center point.
6:17
When we take a look at it in
the preview and hover over the circle,
6:20
you can see how the icon rotates and
evenly scales from its center point.
6:23
Looks good.
6:28