• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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 were created within a <svg> element, transforming them in this or any other way would not be possible. Thus, if you want to rotate, skew, or otherwise transform a group of SVG elements, you likely need to use the grouping <g> element.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint