This chapter is from the book
This chapter is from the book
This chapter is from the book
Applying a Fill
Fills can be applied to an object using a style declaration. The structure of the declaration is fill:color-value (where color-value is replaced by a color keyword or a hexadecimal value).
You can also specify that an object have no fill to avoid having the object painted with its default black fill. As you saw in Hour 5, an unstyled object is assumed to be filled with black. To counter this automatic fill, you will need to give the desired object a style of fill:none.
To demonstrate the use of hexadecimal values and the fill command, follow Listing 7.1 to begin to create your first weather graphic scene for the news center example first introduced in Hour 1: the sunny sky. First, use the rectangle you created in Listing 5.2 on line 9 to serve as the weather graphic's "sky" (shown on line 13); follow the rectangle with the circle first created in Listing 5.5 to represent the sun (shown on line 15).
Next, create your style sheet (lines 6 through 11) with two classes: one to describe a blue fill via the hexadecimal notation of #99CCFF (shown on line 8) and another to describe a yellow fill via the hexadecimal notation of #FFFF00 (shown on line 9). Finally, apply these classes to their appropriate objects (lines 13 and 15). The resulting graphic is shown in Figure 7.2.
){kind=link}
Listing 7.1 Creating an Illustration of the Sun in the Sky
01: <?xml version="1.0" standalone="no"?>
02: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
03:
04: <svg width="500" height="300">
05:
06: <style type="text/css">
07: <![CDATA[
08: .Fill99CCFF{fill:#99CCFF;}
09: .FillFFFF00{fill:#FFFF00;}
10: ]]>
11: </style>
12:
13: <rect id="Sky" x="10" y="45" width="200" height="245" class="Fill99CCFF"/>
14:
15: <circle id="Sun" cx="105" cy="160" r="56" class="FillFFFF00"/>
16:
17: </svg>
Figure 7.2 Creating an illustration of the sun in the sky.
Note how the style sheet class names reflect the color value terminology in lines 8 and 9. As mentioned before, the "#" symbol was intentionally left out of the selector because CSS does not support certain characters in class names. Rather than attempting to determine whether a character is valid or not according to CSS, you can simplify your task by only using upper- and lowercase letters and the numbers 0 through 9.