|
|
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>
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.
|
|