Radial Gradient Ellipses

---

Multi-Stop Radial Gradients

Consider the ellipse and rectangle in Figure 3.5 that are rendered with radial gradient shading.

Figure 3.5: An ellipse and a rectangle with radial gradient shading.

The SVG document in Listing 3.5 renders an SVG ellipse element and an SVG rect element with radial gradient shading that creates a wave-like effect.

Listing 3.5 ripple4RadialGradient2.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg">     <defs>       <radialGradient                        gradientUnits="userSpaceOnUse"                       cx="400" cy="200" r="300"                       fx="400" fy="200">         <stop offset="0%"   stop-color="red"/>         <stop offset="33%"  stop-color="blue"/>         <stop offset="67%"  stop-color="red"/>         <stop offset="100%" stop-color="blue"/>       </radialGradient>       <radialGradient                        gradientUnits="userSpaceOnUse"                       cx="400" cy="200" r="300"                       fx="400" fy="200">         <stop offset="0%"   stop-color="yellow"/>         <stop offset="33%"  stop-color="blue"/>         <stop offset="67%"  stop-color="yellow"/>         <stop offset="100%" stop-color="blue"/>       </radialGradient>     </defs>   <g transform="translate(50,20)">     <ellipse fill="url(#radialGradient1)"              stroke="black" stroke-width="8"              cx="300" cy="100" rx="300" ry="100"/>     <rect    fill="url(#radialGradient2)"              stroke="black" stroke-width="8"              x="0" y="200" width="600" height="300"/>   </g>  </svg>

Remarks

The SVG code in Listing 3.5 renders an ellipse and a rectangle, each of which has a fill attribute that references a radial gradient. Let's examine the code in a bit more detail.

The ellipse has a 'relative' center point of (300,100) and horizontal major axis of length 300 and a vertical minor axis of 100 pixels. Since the SVG g element specifies an SVG translate function that specifies a horizontal shift of 50 pixels and a vertical shift of 20 pixels, the 'absolute' center of the ellipse is (350,120).

The fill color for the ellipse refers to a radial color gradient that is defined in the SVG defs element. The radial gradient has an id value of radialGradient1 and is referenced in the fill color by means of the following syntax:

style="fill:url(#radialGradient1)"

The upper-left vertex of the rectangle is the 'relative' point (0,200), it has a width of 600 pixels and its height is 200 pixels. Since the SVG g element specifies an SVG translate function that specifies a horizontal shift of 50 pixels and a vertical shift of 20 pixels, the 'absolute' coordinates of the upper-left vertex of the rectangle are those of the point (50,220).

The fill color for the rectangle refers to a radial color gradient that is defined in the SVG defs element. The radial gradient has an id value of radialGradient2, and it is referenced in the fill color by means of the following syntax:

style="fill:url(#radialGradient2)"

The graphics image rendered by the SVG code in Listing 3.5 is probably much different from what you expected. This SVG code gives you an example of how you can create vivid and striking visual patterns by means of compact SVG code.

---