Grouping shapes or elements using the <g id= ... </g> command allows us to treat those defined lines as a single unit. We can then apply other commands or actions to that unit.
This is similar to creating an object in a tool like Adobe Illustrator, then grouping all the elements together so they can be manipulated as a single entity.
In this example we generate some simple shapes, group them together, then use the transform and scale functions to make mirror copies of them.
Here is the code used to generate the left and right eye brows ...
Normally the 'scale' function takes 2 arguments, specifying the amount you wish to scale an object in the x and y dimensions. However, it can be altered to produce the effect of mirroring the object. We use this technique to mirror the whiskers in the horizontal dimension.
Note that if one of the dimensions is given a value of -1 with the 'scale' function, the effect is to create a mirror copy of the object, as in Example 2.
The mirroring action can be applied to the horizontal and/or vertical directions.
Finally, we've created the right-hand whiskers first, then used the 'transform' command to produce the left-hand whiskers. Note the use of '-1' as one of the 'scale' units to achieve the mirror effect.
Example 2As an after-thought, I grouped the whole face ('scaryface') in a 'g' element, then copied the whole thing to the right with the 'use' element. View the source code to see how this is done.
All done.