Linear Gradient Ellipses

---

Radial Gradient Ellipses

Figure 3.4 depicts an ellipse with radial gradient shading.

Figure 3.4: An ellipse with a radial gradient.

The SVG document in Listing 3.4 defines a radial gradient that is used as the color of an ellipse with center (250,150) and axes of length 200 pixels and 100 pixels.

Listing 3.4 ellipseRadialGradient1.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>   <ellipse      cx="265" cy="165" rx="200" ry="100"      stroke-dasharray="1 1 1 1"      stroke="white"      stroke-width="4"      fill="black"/>   <ellipse      cx="250" cy="150" rx="200" ry="100"      stroke="white"      stroke-width="1"      stroke-dasharray="1 1 1 1"      style="fill:url(#gradientDefinition)"/> </svg>

Remarks

The SVG code in Listing 3.4 renders two ellipses in order to create a shadow effect (similar to Listing 3.3). The fill color for the second ellipse refers to a radial color gradient that is defined in the SVG defs element. The radial gradient has an id value of gradientDefinition, and it is referenced in the fill color by means of the following syntax:

  style="fill:url(#gradientDefinition)" 

The radial gradient has an initial color of yellow and a final color of black. Unlike linear gradients, the intermediate colors are calculated by means of a radial gradient in order to achieve the effect that you see in the associated figure. In order to understand how the intermediate colors are determined, imagine the effect of dropping a stone into a pond and 'capturing' the set of concentric circles. The colors of these circles are based on the set of colors that you obtain by a color gradient that starts from yellow (#FFFF00) and ends with black (#000000). Here's an interesting point about radial color gradients: if you drew a line segment with one end point coinciding with the center of all the concentric circles, that line segment would be colored with a linear gradient.

One more point about the second ellipse in this example: notice how the values for the stroke-dasharray attribute and the stroke attribute create a slightly 'polished' effect on the circumference of the ellipse.

---