Inheriting an SVG style Attribute

   



Inheriting Attributes in Multiple SVG G Elements

Consider the set of rectangles in Figure 2.9.

click to expand
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

start example
<?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>
end example

Remarks

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.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net