Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Interaction using the mouse - Rectangle example -->
<rect x="5" y="5" width="100" height="100" style="fill:pink">
<set attributeName="fill" from="pink" to="red" begin="mouseover" end="mouseout"/>
</rect>

<!-- Interaction using the mouse - Text example -->
<text x="2" y="200" font-size="12" fill="blue">Move over and click !
<set attributeName="font-size" from="10" to="25" begin="mouseover" end="mouseout"/>
<set attributeName="fill" from="blue" to="red" begin="mousedown" end="mouseup"/>
</text>

<!-- Changing another element's properties -->
<rect id="changeColor" x="10" y="270" width="20" height="20" rx="5" ry="5" style="fill:green"/>
<text x="40" y="285" font-size="12">Move over for red text</text>
<rect id="bigText" x="10" y="310" width="20" height="20" rx="5" ry="5" style="fill:green"/>
<text x="40" y="325" font-size="12">Move over for big text</text>
<rect id="bigRedText" x="10" y="350" width="20" height="20" rx="5" ry="5" style="fill:green"/>
<text x="40" y="365" font-size="12">Click me for big red text</text>
<text id="changingText" x="25" y="430" font-size="35" fill="darkgrey">SVG

<set attributeName="fill" from="black" to="purple" begin="changeColor.mouseover" end="changeColor.mouseout"/>
<set attributeName="font-size" from="35" to="55" begin="bigText.mouseover" end="bigText.mouseout"/>
<set attributeName="font-size" from="35" to="55" begin="bigRedText.click" end="bigRedText.mouseout"/>
<set attributeName="fill" from="black" to="red" begin="bigRedText.click" end="bigRedText.mouseout"/>
</text>

</svg>

In the first two examples, the rectangle and text elements react to the different events, such as moving the mouse and clicking, to create a simple rollover effect. Any SVG property that can be applied to an element -- such as fill color, stroke-width, size, and opacity -- can be changed in this fashion. In the second example, the text element has two events that it reacts to -- mouseover and mousedown. This demonstrates that multiple events can be assigned to the same element.

When you want an event on one element to cause an action to occur on another element, assign id attribute to SVG elements and reference them.

In the last example, the changes are made to the text when the mouse moves over the various rectangles. The three rectangles are assigned their respective id attributes, and the text's <set> element references these through id.eventName. When the rectangle's events are triggered, the text's attributes change accordingly.