Creating 3D Effects with Circles

   



Creating Cones with Gradient Shading

Consider the gradient cone rendered in Figure 3.13.

click to expand
Figure 3.13: A cone with linear gradient shading.

The SVG document in Listing 3.13 renders a cone with linear gradient shading.

Listing 3.13 vGradientCone1.svg

start example
<?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>    <linearGradient        x1="0" y1="0" x2="200" y2="0"       gradientUnits="userSpaceOnUse">       <stop offset="0%"   style="stop-color:#FF0000"/>       <stop offset="100%" style="stop-color:#000000"/>    </linearGradient> </defs> <g transform="translate(50,50)">    <polygon points="0,50 200,50 100,300"          style="fill:url(#gradientDefinition1);"/>    <ellipse cx="100" cy="50"             rx="100" ry="20"             style="fill:blue;"/> </g> </svg>
end example

Remarks

A cone in the Euclidean plane can be rendered with a triangle and an ellipse, as demonstrated in the SVG code in Listing 3.13. The triangle is rendered by means of the SVG polygon element whose fill attribute references a linear gradient (defined in the SVG defs element) that creates a more realistic visual effect. You can experiment with radial shading or add gradient shading for the ellipse that represents the top of the cone. Incidentally, you can replace the triangle with a set of colored line segments, and then use JavaScript/ECMAScript in order to update the color of the line segments to create the impression of a rotating cone. This is similar to controlling the manner in which the lights in a circular neon are switched on and off so that one light appears to be rotating in a circular fashion.



   



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