|
|
Consider the gradient cone rendered in Figure 3.13.
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
<?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>
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.
|
|