On a previous page, we discussed how to 'move' a shape, by 'translating' it. Recall that translate works by moving the origin of the SVG coordinate system to the values in the translate command - NOT moving the object.
This has the same net result as moving the object, but the process is different and we need to remember this.
Here we have set up an object with known dimensions, at particular coordinates. To mark our bounding box we've placed small red circles at the corners of the box.
House 1 is our original object, placed where it should be according to our code:
House 1.1 has been 'translated' 200 pixels to the right (x-axis) ONLY. Thus our image (as shown by our bounding box) appears 200 pixels to the right of the original, but with the same colour, size, and orientation.
Since we have used the g element to group our commands together, the code is EXACTLY the same as House 1 except for the inclusion of the translate transformation:
This demonstrates the power and usefulness of using g to group elements together - we are able to translate the whole house rather then each individual element.
House 1.2 is 'moved' straight down 200px from the original position, and House 1.3 is moved 200px down and right.
We have also altered the house, door, and roof colours in House 1.3 since we can do so with the grouped house object.
All done.