Using line to Render Rectangles

---

Rendering Rectangles with Opacity

Consider the rectangles in Figure 1.3.

Figure 1.3: Rectangles with different opacity.

The SVG rect element allows you to specify the opacity of an object, where the opacity is a decimal number between 0 and 1.

The SVG document opacityRect1.svg in Listing 1.6 uses the SVG rect element in order to render a set of rectangles with different opacity values.

Listing 1.6 opacityRect1.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%"> <!-- draw rectangle --> <g transform="translate(50,50)"> <rect    x="0" y="0" width="150" height="50"    style="fill:red;"    opacity="1"/> </g> <g transform="translate(50,150)"> <rect    x="0" y="0" width="150" height="50"    style="fill:red;"    opacity=".6"/> </g> <g transform="translate(50,250)"> <rect    x="0" y="0" width="150" height="50"    style="fill:red;"    opacity=".2"/> </g> </svg>

Remarks

Consider the case where you have a red rectangle that overlaps with a blue rectangle, and the blue rectangle is rendered after the red rectangle. When the value of the opacity attribute is 1 (which is the default value), the overlapping region will be a solid blue color. However, when the value of the opacity attribute is less than 1, you will see a composite color effect in the overlapping region. This composite color depends on the value of the opacity attribute for each of the two rectangles.

---