|
|
Consider the set of rectangles in Figure 2.9.
Figure 2.9: Inheriting attributes in multiple SVG g elements.
The SVG document in Listing 2.15 specifies two SVG g elements, each of which uses a different style attribute in order to control the display attributes of the enclosed rectangles.
Listing 2.15 inheritStyle2.svg
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient gradientUnits="objectBoundingBox"> <stop offset="0%" stop-color="#FF0000"/> <stop offset="100%" stop-color="#000000"/> </linearGradient> <linearGradient gradientUnits="objectBoundingBox"> <stop offset="0%" stop-color="#FFFF00"/> <stop offset="100%" stop-color="#000000"/> </linearGradient> </defs> <g> <g fill="url(#linearGradientDefinition1)"> <rect x="100" y="50" stroke="red" stroke-width="3" stroke-dasharray="4 4 4 4" width="200" height="100"/> <rect x="400" y="50" stroke="green" stroke-width="3" stroke-dasharray="4 4 4 4" width="200" height="100"/> </g> <g fill="url(#linearGradientDefinition2)"> <rect x="100" y="250" stroke="blue" stroke-width="3" stroke-dasharray="4 4 4 4" width="200" height="100"/> <rect x="400" y="250" stroke="yellow" stroke-width="3"
stroke-dasharray="4 4 4 4"
width="200" height="100"/> </g> </g> </svg>
Listing 2.15 demonstrates how to specify different SVG fill attributes for different SVG g elements. Each SVG fill attribute is applied to all the graphics images contained within a given SVG g element. In Listing 2.15, there are two linear gradient definitions linearGradientDefinition1 and linearGradientDefinition2, each of which is applied a pair of rectangles. You can easily create variations of Listing 2.15 that contain a combination of linear and radial gradient definitions that are applied to a variety of geometric objects, such as ellipses, polygons, and highly customized objects of your own design.
|
|