Rendering Rectangles with a Shadow Effect

---

Rendering Triangular Wedges with Shading

Consider the triangular wedge in Figure 1.5.

Figure 1.5: A triangular wedge.

Figure 1.6: A rectangle with the first viewBox.

The SVG document in Listing 1.8 uses the SVG polygon element in order to render a triangular wedge.

Listing 1.8 triangularWedge1.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(100,100)">   <!-- render triangle -->   <polygon     points="200,0 300,150 100,150"     style="fill:red;stroke:blue;"/>   <!-- render parallelogram (clockwise) -->   <polygon     points="200,0 100,150 50,120 150,-30"     style="fill:black;stroke:blue;"/> </g> </svg>

Remarks

The SVG code in Listing 1.8 contains two SVG polygon elements: the first one renders a red triangle, and the second one renders a black parallellogram on the left side of the red triangle. The parallelogram and triangle share a common side; the other pair of parallel sides of the parallelogram are tilted upward slightly, thereby creating a three-dimensional shading effect. Usually an angle of 20° or so produces the best shading effect, but feel free to experiment with different angles of elevation until you find one that suits your preferences.

---