Join Chris Converse for an in-depth discussion in this video Grouping SVG elements, part of Design the Web: SVG Rollovers with CSS.
- View Offline
Now before we make the hover state for the aqua segment, what we want to do next is group together some of the SVG elements. So that we can control multiple SVG items with our pseudo class. So let's scroll down and let's find our segment aqua, which is right here. Then after that we have more artwork. We have a polygon here. I'm going to come in here and add an extra o in there to malform that. And then we can see that that's actually the little triangle here that points at our human figure in the text. I'll come back and remove the typo and you'll see the arrow come back.
The next segment here, this path, let's malform that. That's the person's body. Next path, that's the person's head. And then if we scroll down, we can see our three text objects. I'll malform the first one here, and that will affect all of the text elements. So what we're going to do is, let's scroll up and before the segment aqua, let's hit a Return and let's put in a <g> tag. This is the SPG grouping tag, so we have a beginning <g> tag here and then let's scroll down to the bottom after the text element.
Let's add an ending </g> tag. So now all of these items inside of here, the three text elements, both of our paths, the polygon and the aqua segment are now inside of that grouping tag. I'm going to come in here and just simply tab this in a little bit, to keep the formatting in place. So now if I come in here and malform this grouping tag, I'll add a second <g>. Notice that with that malformed, all of these items now disappear, because now they're all grouped together in this one grouping element. So we'll come back here and fix that. Now let's create a second group.
What I want to do is group together the person and all of the text and the arrow. So we have the segment, which is going to be showing all the time. So let's come in here and before the polygon, let's hit a Return. Let's add another grouping tag here. Let's scroll down. After the text, let's end that grouping tag. And again, I'll come in here and format this a little bit. I'll just tab this in. So now we have a group inside of a group. For the outer group, before this segment aqua, let's come in here and add a class. We're going to call this aqua_pieces.
And let's come down to the second group and add a class on here called aqua_over. And now to test and make sure we have the right elements inside of aqua_over, I'll come in here and add a second <g> to malform this. And I can see that that takes away the arrow, the person, and the text, but it leaves the aqua segment. Let's fix the <g> tag. Let's move up to the top, inside of our CSS, let's hit a Return. The first thing I want to do is activate a hover state for that aqua segment. Now we're going to create another CSS rule, but I'm going to target the parent class first.
So we'll type .aqua_pieces:hover, we're going to put the hover pseudo-class on the container, then a space, then .segment_aqua. Put in our brackets, and let's set the fill to #3c9497. Once that's in place, if we come over here to the browser, all of our hover states are still in place from the three previous segments we defined. And now if I roll over the aqua segment, that will change color.
And notice the color now matches the color of the elements inside of the group. So now you'll see that we have all four line segments triggering their hover states. What you'll also notice is if we come over here and hover over any of the art work that's inside of that group, that will also trigger the hover state for the aqua segment. So if I roll over the person's head or body or any of the text, that will still trigger that line segment. So now that we have parts of our SVG graphic strategically grouped, next we'll further optimize our in-line styles into our external style sheet and we'll show and hide multiple SVG elements using our new groups.