Grouping and Transforming SVG

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