Asymmetric Arc-Based Patterns

   



Creating 3D Effects with Circles

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

start example
<?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> 
end example

Remarks

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.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net