|
|
Consider the image in Figure 3.12 that is based on a circle with gradient shading.
Figure 3.12: A circle with a 3D effect.
The SVG document in Listing 3.12 renders a circle with gradient shading in order to create a three-dimensional effect.
Listing 3.12 blue3DCircle1.svg
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> <defs> <radialGradient gradientUnits="objectBoundingBox" fx="30%" fy="30%"> <stop offset="0%" style="stop-color:#FFFFFF"/> <stop offset="40%" style="stop-color:#0000AA"/> <stop offset="100%" style="stop-color:#000066"/> </radialGradient> <circle cx="0" cy="0" r="80" style="fill:url(#blueCircle)"/> </defs> <g width="100%" height="100%"> <use xlink:href="#3DBlueCircle" x="100" y="100"/> </g> </svg>
The SVG code in Listing 3.12 demonstrates how to render a circle with a radial gradient in order to create a three-dimensional effect. The key idea behind this technique involves the use of three stop colors in the definition of the radial gradient. In this example, the initial stop color is white, which is specified by the hexadecimal string FFFFFF . The second stop color is the hexadecimal string 0000AA, which is a darkened blue color. The final stop color is the hexadecimal string 000066, which is an even darker shade of blue. This technique can be adapted in order to create three-dimensional effects based on the colors red, green, or yellow.
|
|