URL-Enabled Ellipses

---

Handling Mouse-Over Events

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

Figure 11.4: A mouse-aware rectangle.

The SVG document mouseOverRect1.svg in Listing 11.6 demonstrates how to use the SVG mouseover element in order to change the color of a rectangle.

Listing 11.6 mouseOverRect1.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="#FFFF00"/> </rect> </g> </svg>

Remarks

Listing 11.6 contains an SVG rect element that specifies the color, location, and dimensions of the rectangle by means of 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 yellow. When you move your mouse outside the rectangle, its color reverts to red. This color change is produced by the following code fragment that is specified in the same SVG rect element:

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

SVG makes it very easy to associate mouse events with SVG elements, and you can process those mouse events in order to extract the information that you need. The next example shows you how to make a 'mouse-aware' rectangle disappear when you click your mouse inside the rectangle.

---