In previous pages (Grouping Elements #1, Translate #2, Translate #3) we showed how to assemble a complex object from several independent elements. These elements could then be manipulated as a group using the 'g' element.
However, doing this results in some limitations. For example:
This is where we might use a 'definition' or defs element.
Wrapping objects between <defs> and </defs> tags defines them without displaying them.
To do that we need the use element with the xlink:href element.
The code for House 1:
An object wrapped in defs tags IS NOT DISPLAYED until it is used later.
All 3 of the top houses are not displayed as coded, until the code 'use xlink' is used as below.
Note that there is NO colour fill for any of the example houses. So how did we add their colour?
During the display with use, we defined fills of red, orange, and green.
The power of def is how we can use the original definition, but change attributes with a style.
House 1.1 only changes the fill colour of the house - the roof, door, and window remain unchanged from House 1.
With House 2.1 we use the scale transformation to create a horizontal mirror of House 2.
We can also do a vertical mirror, as in House 3.1.
When scale is used like this we must use the translate command FIRST to move the shape.
To create a horizontal mirror image
To do both horizontal and vertical mirror images, we would use -1 for both values.
Determining the correct values for the x and y coordinates of the 'translated' shape requires some thought.
All done.