4.1 Introduction
Frequently there is a need to group drawing elements together for one reason or another. One reason is if a set of elements share the same attribute. However, probably the major use is to define a new coordinate system for a set of elements by applying a transformation to each coordinate specified in a set of elements. Grouping is also useful as the source or destination of a reference.
Grouping in SVG is achieved by the g element. A set of elements can be defined as a group by enclosing them within a g element. For example:
<g style="fill:red;stroke:black"> <circle cx="70" cy="100" r="50" /> <rect x="150" y="50" rx="20" ry="20" width="135" height="100" /> <line x1="325" y1="150" x2="375" y2="50" /> <polyline points="50, 250 75, 350 100, 250 125, 350 150, 250 175, 350" /> <polygon points=" 250, 250 297, 284 279, 340 220, 340 202, 284" /> <ellipse cx="400" cy="300" rx="72" ry="50" /> </g>
The g element can have any of the attributes or style properties defined for it that are generally applicable to individual drawing elements. In the example above, all the basic shapes will be rendered with the interior red and the border black.
4.2 Coordinate Transformations
The transform attribute applied to a g element defines a transformation to be applied to all the coordinates in the group. For example:
<g transform="translate(100,0)"> <circle cx="70" cy="100" r="50" /> <rect x="150" y="50" rx="20" ry="20" width="135" height="100" /> </g>
Instead of the circle being drawn centred on the point (70,100) it will now be drawn centred on the point (170,100). The rectangle will have a top left corner of (250,50) instead of (150,50). Consequently, a useful method of defining a composition made up of a number of graphical objects is to define each object as a group using the most appropriate coordinate system and then use the transformations applied to the group to construct the graphic as a whole. Groups can be nested to any depth and transformations applied to each. In consequence, a diagram can be constructed out of sub-assemblies that come together to produce objects that are then composed to produce the diagram.
The possible transformations are:
| Transformation | Meaning | Parameters |
|---|---|---|
| translate | Defines a translation of the coordinates | x and y defining the x and y translation |
| scale | Defines a scaling of the X and Y coordinates | sx and sy defining the scaling in the X and Y directions s defining the same scaling in the X and Y directions |
| rotate | Defines a rotation about a point | angle, x and y defining a clock-wise rotation of angle degrees about the point (x,y) angle defining a clock-wise rotation of angle degrees about the origin |
| skewX | Defines a skew along the X axis | angle degrees defining a skew of the X position by Y*tan(angle) |
| skewY | Defines a skew along the Y axis | angle degrees defining a skew of the Y position by X*tan(angle) |
It is also possible to define a matrix that performs a composite set of transformations.
The transform attribute can consist of a sequence of individual transformations in which case they are performed in the order right to left. The same effect can be achieved in a much more readable way by nesting several g elements, each with a single transformation. It is recommended that the nested approach is the one taken.
Figure 4.1 gives a montage of various transformations where the text defining the transformation is also transformed.
Figure 4.1: Transformations
The transform attribute can also be applied to the various drawing elements directly but it tends to be most useful when applied to a group.
4.3 Clipping
A group of elements can be clipped against a clip path which is defined by a clipPath element:
<clipPath id="myClip"> <circle cx="350" cy="100" r="50"/> </clipPath> <g style="stroke:none;clip-path:url(#myClip)"> <rect style="fill:red" x="0" y="0" width="500" height="20" /> <rect style="fill:white" x="0" y="20" width="500" height="20" /> <rect style="fill:blue" x="0" y="40" width="500" height="20" /> <rect style="fill:red" x="0" y="60" width="500" height="20" /> <rect style="fill:white" x="0" y="80" width="500" height="20" /> <rect style="fill:blue" x="0" y="100" width="500" height="20" /> <rect style="fill:white" x="0" y="120" width="500" height="20" /> <rect style="fill:blue" x="0" y="160" width="500" height="20" /> <rect style="fill:red" x="0" y="180" width="500" height="20" /> <rect style="fill:white" x="0" y="200" width="500" height="20" /> <rect style="fill:blue" x="0" y="220" width="500" height="20" /> <rect style="fill:red" x="0" y="240" width="500" height="20" /> <rect style="fill:white" x="0" y="260" width="500" height="20" /> <rect style="fill:blue" x="0" y="280" width="500" height="20" /> <rect style="fill:red" x="0" y="300" width="500" height="20" /> <rect style="fill:white" x="0" y="320" width="500" height="20" /> </g>
The group of rectangles are clipped against the circle basic shape. The clipPath element has an id attribute and the g element has a style or attribute clip-path that specifies the path to be used for clipping. It is also possible to clip against a path or even text:
<clipPath id="myClip"> <path d="M 0 112 C 40 160 120 80 160 106 C 160 106 165 110 170 103 C 180 0 220 20 260 61 C 260 61 280 73 290 68 C 288 80 272 85 250 85 C 195 83 210 110 230 120 C 260 140 265 185 200 191 C 150 195 30 195 0 112 Z"/> </clipPath>
<clipPath id="myClip"> <text x="10" y="310" style="font-size:150">DUCK</text> </clipPath>
For referenced items, such as clip paths, it is considered good practice to surround them with a defs element to emphasise that they are not rendered directly. Drawing elements, such as path are not rendered if they are defined within a defs element.
Figure 4.2 shows the results of the three clipping paths defined above.
Figure 4.2: Clipping