Rendering Rectangles with Opacity

   



Rendering Rectangles with a Shadow Effect

Consider the rectangle with a shadow effect in Figure 1.4.

click to expand
Figure 1.4: A rectangle with a shadow effect.

The SVG document in Listing 1.7 uses the SVG rect element in order to render a rectangle with a shadow effect.

Listing 1.7 rectShadowEffect1.svg

start example
<?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="100%" height="100%">

     <g transform="translate(50,50)">   <rect      x="20" y="20" width="250" height="150"      style="fill:black;"/>   <rect      x="0" y="0" width="250" height="150"      style="fill:red;"/> </g> </svg>
end example

Remarks

The SVG code in Listing 1.7 demonstrates how easy it is to create a shadow effect by rendering two rectangles: the background rectangle is black and the foreground rectangle is red. The background rectangle has a (+,+) location relative to the foreground rectangle; that is, it is shifted downward and to the right. The other three possibilities for the background rectangle location are (+,-), (-,+), and (-,-) with respect to the foreground rectangle. These other locations provide different shadow effects that create the impression of different 'view positions.'



   



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