The <g> Element
The <g> element is, like a nested <svg> element, provided so that you can group several SVG elements within it. A <g> element has one important facility that a nested <svg> element does not have: A <g> element can be transformed. Transformation is a powerful tool in SVG whereby either statically or in an animation the shape, size, or position, for example, of a group of SVG elements can be changed.
The following code allows you to rotate a pair of rectangles contained within a grouping <g> element through 360 degrees over a period of ten seconds. Don’t worry about how the animation works; this subject is discussed in Chapter 8, “Animation: SVG and SMIL Animation.” Figure 02.02 shows the animation part completed. If the rectangles ...
Get Designing SVG Web Graphics now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
