Radial Color Gradients

---

Rendering Rectangles with Radial Gradients

Consider the rectangle with radial gradient shading in Figure 2.2.

Figure 2.2: A radial gradient rectangle.

In this example, the SVG rect element defines a rectangle of width width and height height whose upper-left vertex has coordinates (x,y).

The SVG document in Listing 2.4 demonstrates how to draw an SVG rectangle with radial gradient shading by means of the SVG radialGradient element.

Listing 2.4 rectRadialGradient1.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="yellow" offset="0%"/>      <stop stop-color="black"  offset="100%"/>   </radialGradient>   </defs>   <rect      x="65" y="65" width="400" height="250"      stroke-width="4"      stroke="yellow"      stroke-dasharray="2 2 2 2"      fill="black"/>   <rect      x="50" y="50" width="400" height="250"      stroke-width="4"      stroke="yellow"      stroke-dasharray="2 2 2 2"      style="fill:url(#gradientDefinition)"/> </svg>

Remarks

Listing 2.4 contains two SVG rect elements, similar to Listing 2.3. In this example, though, the second rectangle references a radial color gradient that ranges from yellow to black in a radial fashion. The combination of the value for the stroke-dasharray attribute and the stroke attribute create a red perforated effect for the second rectangle.

---