This chapter is from the book
This chapter is from the book
This chapter is from the book
Grouping Styles
Applying style to a grouping of objects, rather than individual elements, is also very effective for reducing the number of applications of the class attribute in your files. Similar to how most design programs handle groupings, SVG allows developers the ability to associate elements together using the g element.
The group element itself generally does not affect the display of its enclosed content. However, when a style or transformation (you'll learn about this in Hour 14, "Transforms") is applied to the group, the enclosed content is affected according to such an application. In the case of the raindrops, if you want every raindrop to appear the same, you can apply one class to a group surrounding all three objects by moving your class attribute there.
In Listing 6.6, such a change has been made (using Listing 6.5 as a starting point). First, a group is wrapped around all three raindrops, starting on line 14 and ending on line 22. The class attribute is removed from each of the raindrops and placed within the g element.
Listing 6.6 Applying Style to a Group
01: <?xml version="1.0" standalone="no"?>
02: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
03: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
04:
05: <svg width="500" height="300">
06:
07: <style type="text/css">
08: <![CDATA[
09: .StrokeBlack{stroke:black;}
10: .FillYellow{fill:yellow;}
11: ]]>
12: </style>
13:
14: <g class="StrokeBlack FillYellow">
15:
16: <path d="M150,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
17:
18: <path d="M250,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
19:
20: <path d="M350,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
21:
22: </g>
23:
24: </svg>
The result of such a change will appear visually no different than Figure 6.3. Moving the class application to one central area, however, eliminates the need to duplicate every instance of the class attribute for similar objects.
){kind=link}
By the same token, you can apply a class to a group while still applying a class to a grouped element. It's important to note that in the case of two conflicting style commands (such as two fill commands), the style command closest to the element will be honored. In Listing 6.6, although the raindrops' group is told to fill the objects with yellow (shown via the class value on line 15), the middle raindrop itself is designated to fill itself with orange (via its class attribute on line 19). Thus the middle raindrop will appear in orange.
Listing 6.7 Style Application Hierarchy
01: <?xml version="1.0" standalone="no"?>
02: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
03: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
04:
05: <svg width="500" height="300">
06:
07: <style type="text/css">
08: <![CDATA[
09: .StrokeBlack{stroke:black;}
10: .FillYellow{fill:yellow;}
11: .FillOrange{fill:orange;}
12: ]]>
13: </style>
14:
15: <g class="StrokeBlack FillYellow">
16:
17: <path d="M150,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
18:
19: <path class="FillOrange"
d="M250,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
20:
21: <path d="M350,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
22:
23: </g>
24:
25: </svg>
The class closest to this middle rain drop determined the fill (orange). The same rule holds true no matter how nested your content may be. For instance, take the example of three rectangles following:
01: <g class="FillBlue"> 02: <g class="FillRed"> 03: <rect id="Box1" class="FillGreen".../> 04: <rect id="Box2".../> 05: </g> 06: <rect id="Box3".../> 07: </g>
Assuming that the selector names match an appropriate style declaration in a style sheet (not shown), the Box1 rectangle (line 3) will be filled green, the Box2 rectangle (line 4) will be filled red, and the Box3 rectangle (line 6) will be filled blue.
In each case, the class attribute closest to the element determines the fill. Thus, line 3's Box1 has its own class attribute, which determines that it will be filled green. Line 4's Box2 does not have a class attribute; it is, however, closer in hierarchy to line 2 than line 1 (as it is a child of line 2's element) and thus accepts line 2's style application of a red fill. Line 6's Box3 also has no class attribute, but, being a child of line 1's group, it accepts line 1's style application of a blue fill.