Hiding Rectangles

---

Mouse Clicks and Gradient Colors

Consider the circle rendered in Figure 11.6.

Figure 11.6: A circle whose color changes after a mouse click.

The SVG document in Listing 11.8 demonstrates how to handle mouse clicks in order to render a circle with a gradient color set.

Listing 11.8 circleGradient1.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>    <animateColor              xlink:href="#shape"       attributeName="fill"       values="rgb(255,0,0);rgb(0,255,255);               rgb(0,128,151);rgb(255,0,0)"       dur="3s" begin="indefinite"/> </defs> <a xlink:href="#circleGradient1">     <circle              cx="100" cy="100" r="50"             style="fill:rgb(255,255,0)"/> </a> </svg>

Remarks

The SVG code in Listing 11.8 renders a yellow circle via the following code fragment:

<circle          cx="100" cy="100" r="50"         style="fill:rgb(255,255,0)"/>

When you click on the circle with your mouse, the color of the circle changes through a range of colors for three seconds. The range of colors is specified in the values attribute in the following code fragment that is defined in the SVG defs element:

<animateColor      xlink:href="#shape"    attributeName="fill"    values="rgb(255,0,0);rgb(0,255,255);            rgb(0,128,151);rgb(255,0,0)"    dur="3s" begin="indefinite"/>

The association between the SVG circle element and the SVG animateColor element is made by embedding the SVG circle element inside a link element, as shown below:

<a xlink:href="#circleGradient1">     <circle              cx="100" cy="100" r="50"             style="fill:rgb(255,255,0)"/> </a> 

This example shows how to combine graphics images, mouse events, and animation.

---