Dotted and Dashed Line Segments

---

Using SVG Embedded Stylesheets

Consider the pair of nested rectangles in Figure 2.6.

Figure 2.6: A pair of nested rectangles.

The SVG document in Listing 2.8 uses a stylesheet in order to render a nested pair of rectangles.

Listing 2.8 style1.svg

 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="800" height="500"> <style type="text/css"> rect {   stroke-width:4;   stroke:blue;   fill:red; } </style>   <rect x="50"  y="50"  width="200" height="200"/>   <rect x="100" y="100" width="100" height="100"/> </svg>

Remarks

The stylesheet in Listing 2.8 specifies a set of name/value pairs that are applied to every occurrence of the SVG rect element. As a result, the SVG rect elements do not need to specify the attributes defined in the stylesheet. Moreover, the process of adding, removing, or modifying attribute values becomes very straightforward; simply make the necessary change in the stylesheet and those modifications will be applied to the corresponding elements. The stylesheet in Listing 2.8 can easily be extended to other SVG elements. For example, you could add the following snippet that would affect all the SVG ellipse elements:

ellipse {   stroke-width:8;   stroke:green;   fill:yellow; }

---