2.4 Grouping Shapes

Hello and welcome back to Animating with Snap.svg. We've talked about how to create simple shapes and complex shapes. And we've talked about how to alter the attributes of our shapes to give us different colors and strokes and fills and things like that. And in this lesson, I wanna talk about how we can combine multiple shapes together. So let's say that we wanted to create a house. And instead of using a polygon or a polyline, we decide we want to do that with multiple shapes combined together. Let's talk about how to do that. I'm going to make a copy of site04, and we're going to rename it site05. And then we'll drag that site05 folder down to brackets, and open up index.html. So I'm gonna get rid of all of our circle attributes here. And we'll get rid of the circle itself as well and I'm gonna get rid of all this extra commented code. Now you can still see all of that commented code in the other files, so I'll just get rid of it here. And let's start by creating our rectangle, and the rectangle is going to be the base of our house. So let's call it base and we're gonna set this equal to s. Remember, s is the name of the Snap object that we created up here. We stored it in the variable called s. So anytime we want to refer to this Snap object, we refer to s, so base equals s.rect. And then we need an xy coordinate and a width and a height. I'm gonna set the x value at 50, the y value at 100, so it'll be 50 pixels from the left of the svg, 100 pixels from the top. And then we'll set our width and height to 100 and our height to 75. And that will create our initial rectangle or the base of our house, now let's create the roof. So var roof, and this is gonna be a triangle. Now before we've taken a look at the polyline method, but this time we're gonna use the polygon method, which is very similar. You use the same syntax for it, except for using polygon instead of polyline. So for our polygon, we're going to create three separate xy value pairs to draw out our polygon. So I'm going to put our first corner at an xy coordinate of 35 comma 100. Our second one, we'll put at a xy coordinate of 165 comma 100. And then our third point, which will be the peak of the roof, will be at 100 comma 50. So that makes up the roof itself, the triangle that's gonna serve as the roof. So let's save our index file here. And let's jump back into our browser and take a look at it. So I'm going to navigate to site05/index.html. And we can see our house here. Now we have a couple of minor inconveniences. For example if we wanted to recolor or our house, we would have to recolor both the base and the roof. So we would have to point to, for example, the base. And we'll call on the .attr method. And we'll create our opening and closing parentheses and curly brackets, and inside those curly brackets, we could say fill, colon, and then red inside quotation marks. Save that, refresh our page, and that just gets the base of the house. So, if we wanted the roof of the house as well, we would have to copy all of this, paste it, and then just change base to roof. And the base in the roof here again are just reflecting the variable names that we created up here. So now that we've changed both of them to red, we can save that and refresh our page and now they're both red. Well, Snap.svg allows us to group items together into a single shape. Well it didn't really treat them like a single shape, but it allows you to group shapes together so that you can change their attributes all at the same time. So instead of having base fill red and roof fill red, we can just have a, for example, house fill red. And we could fill the whole house so how do we set that up? Well, let's get rid of the base attribute here and we'll just leave the house attribute. And now we're gonna create a group. And we're going to store it in a variable, and we'll call that variable house. And this name here and this name down here need to match. Because this house attribute that we're applying here needs to actually apply to an existing object, so we're gonna create this variable called house. And there is a method called s.group, or we can even shorten that to s.g and then inside the parentheses for s.g, we need to enter in the shapes that we wanna to group together. So we wanna group together the base of the house and the roof of the house. So we can group those two together, and then now, we're just gonna point to house.attr and set the fill color to red. So, we're only setting the fill color once now, and when we save our file and refresh it, you'll see that it still fills the entire shape. And we could put a stroke around it. So we could do comma stroke. And here's where you're gonna see that it's not really one shape. This is still two shapes. They're just grouped together. And so let's set our stroke to black and you'll see what I mean. Let's save that. And refresh and you'll see that it doesn't just put one stroke around the grouped shape, instead it still puts a stroke around each shape individually. So it still again treats it like two separate shapes, but you can change the attributes for all of those shapes within that group at the same time. So, I'm gonna get rid of that stroke, and let's say that we wanted to add a chimney to our house. For some reason, we didn't wanna create the chimney up here. Instead, we wanted to do it later on, so we could create our chimney here. We could say var chimney, and this is gonna be a simple rectangle, so we'll do s, rect. And then we need our xy coordinates and our width and height. So for this chimney, I'm going to put it at an xy coordinate of 65 comma 50. I'm gonna make it 15 pixels wide and 30 pixels tall. So that will take care of our chimney, let's save our file, jump back into our browser and refresh. And now we've added the chimney here. And I'm leaving it black so we can illustrate our next point here. What I wanna do now is I want to add this chimney to the group. So when we add it to that group, it should take on any attributes that we've applied to that group. So let's jump back into our code and just after we create the chimney, we're going to add it to that group. And the way we do that as we point to the group. Remember we gave this group a name of house. So we're gonna point to that group, which is called house, and we'll type .add, and then inside parentheses, we're going to add a given item to this group. And we wanna add our chimney to that group. And that chimneys is object that we created up here. So now that we've added that chimney to the group, let's see what happens. We'll save our HTML file, jump back over to our browser and refresh. And sure enough we see that the chimney has now been added to the house, because it changes color to match the attributes that we set for the house. And those are the basics of working with groups in Snap.svg. Thank you for watching, and I'll see you in the next lesson.