|
|
Consider the rectangle with a shadow effect in Figure 1.4.
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
<?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>
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.'
|
|