Handling Mouse-Over Events

---

Hiding Rectangles

Consider the 'mouse-aware' rectangle rendered in Figure 11.5.

Figure 11.5: A mouse-aware rectangle.

The SVG document invisibleRect1.svg in Listing 11.7 demonstrates how to use the SVG mouseover element in order to hide a rectangle.

Listing 11.7 invisibleRect1.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%"> <g transform="translate(100,100)"> <rect    x="0" y="0" width="200" height="100"    style="fill:red;stroke:blue;stroke-width:4;">    <set begin="mouseover" end="mouseout"     attributeName="fill" from="#FF0000" to="#000000"/>    <set attributeName="visibility" attributeType="XML"     to="hidden" begin="1s" dur="3s"/> </rect> </g> </svg>

Remarks

The SVG code in Listing 11.7 renders a red rectangle via the following code fragment:

<rect    x="0" y="0" width="200" height="100"    style="fill:red;stroke:blue;stroke-width:4;">

When you move your mouse anywhere in the interior of the rectangle, the color changes from red to black. When you move your mouse outside the rectangle, its color reverts to red. This color change is produced by the following line of code:

<set begin="mouseover" end="mouseout"  attributeName="fill" from="#FF0000" to="#000000"/>

Notice the other feature of this example: one second after the SVG document is loaded, this rectangle will disappear for three seconds and then reappear on the screen. The following lines of code produce this disappearance effect:

<set attributeName="visibility" attributeType="XML"  to="hidden" begin="1s" dur="3s"/>

This example demonstrates how to associate two mouse-related events with the same SVG element, and you can specify additional mouse events in a similar manner. Despite having seen only a few examples of mouse-based events, you're already in a position to create interesting visual effects that combine graphics images and mouse-clicks!

---