This chapter is from the book
This chapter is from the book
This chapter is from the book
Applying a Stroke
Adding a stroke to an object is almost as simple as adding a fill. Instead of the single declaration that fills operate on, strokes require two commands to clearly specify their purpose. The first declaration, stroke, is used to describe the color of the stroke. The second declaration, stroke-width, describes the width of the stroke.
To use the two, you need to add the commands using the following syntax: stroke:stroke-color and stroke-width:x. In this example, stroke-color is replaced with a color keyword or hexadecimal value, and x is replaced with a numerical value (including decimal numbers, such as "2.35").
To demonstrate the application of stroke, follow Listing 7.2 to begin adding the rectangular framework you first created in Hour 5 (in Listing 5.2) to the weather graphic scene in Listing 7.1. Lines 19 and 21 show the circle and rectangle from your previous example, each with the same class applied. Lines 23 and 24 introduce two elliptical shapes to represent the puffy white clouds you'll be creating later in this book.
The rectangle on line 26 (labeled as BarStatistics) defines the space where the weather temperatures will later be displayed. Line 28 creates a group to contain the graphic's framework outline—the box surrounding the entire graphic (line 29) and the box that will eventually surround the graphic's title (line 30).
Finally, you will need to create the style sheet for the document (lines 6 through 17) and apply the classes to appropriate objects.
In this case, four new fills were added: 1) a gray fill (line 8) for the BarStatistics rectangle (line 26), 2) an orange fill (line 9) for the graphic's BarTitle rectangle (line 30), 3) a white fill (line 12) for the elliptical clouds on lines 23 and 24, and 4) a lack of a fill (line 13) for the Outline rectangle (line 29) so that the content behind it can appear through its edges.
To finalize the style sheet, you will need to add two stroke rules. The first, shown on line 14, describes a black stroke (via the hexadecimal notation of #000000). The second, on line 15, describes a width of 1.
NOTE
Remember, if no unit of measurement, such as px or in, is specified (as in this and other examples), this value is interpreted in "unit space values." As you are likely viewing these examples within an Internet browser on your computer screen, the user space value will be equivalent to a pixel. Thus, in this example, stroke-width:1 will describe a stroke with a 1-pixel width.
Both of these stroke styles are to be applied on line 28, the GraphicFramework group consisting of the Outline and BarTitle rectangles. The resulting graphic is shown in Figure 7.3.
){kind=link}
Listing 7.2 Applying Stroke Information to Your Artwork
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: .Fill333333{fill:#333333;}
09: .FillC66A10{fill:#C66A10;}
10: .Fill99CCFF{fill:#99CCFF;}
11: .FillFFFF00{fill:#FFFF00;}
12: .FillFFFFFF{fill:#FFFFFF;}
13: .FillNone{fill:none;}
14: .Stroke000000{stroke:#000000;}
15: .StrokeWidth1{stroke-width:1;}
16: ]]>
17: </style>
18:
19: <rect id="Sky" x="10" y="45" width="200" height="245" class="Fill99CCFF"/>
20:
21: <circle id="Sun" cx="105" cy="160" r="56" class="FillFFFF00"/>
22:
23: <ellipse cx="25" cy="100" rx="50" ry="25" id="Cloud1" class="FillFFFFFF"/>
24: <ellipse cx="180" cy="235" rx="50" ry="25" id="Cloud2" class="FillFFFFFF"/>
25:
26: <rect id="BarStatistics" x="10" y="245" width="200" height="45" class="Fill333333 StrokeNone"/>
27:
28: <g id="GraphicFramework" class="StrokeWidth1 Stroke000000">
29: <rect id="Outline" x="10" y="10" width="480" height="280" class="FillNone"/>
30: <rect id="BarTitle" x="10" y="10" width="480" height="35" class="FillC66A10"/>
31: </g>
32:
33: </svg>
Figure 7.3 Applying stroke information to your artwork.
Similar to the fill style property's ability to apply no fill, the stroke style property can designate an object to have no stroke. In such a case, you need only apply the declaration stroke:none; you do not need to add a stroke-width declaration to an object with a stroke:none declaration applied.