Rendering Rectangles with Radial Gradients

---

Parallelograms as SVG Polygons

Let's take a look at parallelograms, which are a generalization of rectangles (i.e., every rectangle is also a parallelogram). Unlike rectangles, which have four right angles, the internal angles of a parallelogram are not necessarily right angles (i.e., 90°). Consider the parallelogram rendered in Figure 2.3.

Figure 2.3: A parallelogram.

The SVG document radialGradientPoly1.svg in Listing 2.5 uses the SVG elements polygon and radialGradient in order to render the parallelogram in Figure 2.3.

Listing 2.5 radialGradientPoly1.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%">    <defs>       <radialGradient           gradientUnits="userSpaceOnUse">          <stop stop-color="red"   offset="0%"/>          <stop stop-color="black" offset="100%"/>       </radialGradient>       <linearGradient           gradientUnits="userSpaceOnUse">          <stop stop-color="red" offset="0%"/>          <stop stop-color="black"  offset="100%"/>       </linearGradient>    </defs>    <g transform="translate(50,20)">      <polygon         stroke="yellow"         stroke-width="4"         stroke-dasharray="8 8 8 8"         points="50,0 450,0 400,150 0,150"         fill="url(#linearGradient)"/>    </g>    <g transform="translate(50,200)">      <polygon         points="50,0 450,0 400,150 0,150"         stroke="yellow"         stroke-width="4"         stroke-dasharray="2 2 2 2"         fill="url(#radialGradient)"/>    </g> </svg>

Remarks

Listing 2.5 contains two parallelograms with gradient shading attributes that are defined in the SVG defs element; the first uses a linear gradient and the second parallelogram uses a radial gradient. The following line defines the points attribute that defines the four vertices of the second parallelogram:

  points="50,0 450,0 400,150 0,150"

This list of four vertices starts from the upper-left vertex and then specifies the coordinates of the other three vertices in a clockwise fashion. Note that you have the freedom to start from any vertex and list the remaining vertices of the polygon, either clockwise or in a counterclockwise fashion. Choose a style that you prefer and be as consistent as possible; you'll be surprised how much debugging time you will save by doing so.

---