Interactivity in SVG revolves around the mouse, and what it is doint at the moment. What the mouse is then doing is connected to specific events, such as opening a link in a new window, or even javascript.

The Basics

Let's try programming the simplest feature of interactivity: a hyperlink. It is very similar to how you would program a link in html, except that you attach the link to an object. Here is a sample:

<a xlink:href="http://www.google.com">
        <rect x="10" y="10" width="100" height="100"  
              fill="red" stroke="black" stroke-width="3"/></a>
	<circle cx="150" cy="200" r="50" 
	      fill="red" stroke="black" stroke-width="3"/>

The rectangle is linked, but the circle is not. Try linking both of the objects yourself.

Events

Events are based mainly on the movements of the mouse. Here are five basic events concerning the mouse:

mousedown
Event occurs when mouse clicks down.
 
mouseup
Event occurs when mouse releases.
 
mouseover
Event occurs when mouse pointer passes over object.
mousemove
Event occurs when mouse pointer moves while on top of object.
mouseout
Event occurs when mouse pointer passes off of object.

Above are two interactive SVG objects. Interact with them with your mouse. Can you guess which interactive attributes each uses?

Below is the code for each of them:

<rect x="25" y="10" width="150" height="150" rx="15" ry="15" 
      fill="red">
   <set attributeName="fill" from="red" to="blue" 
         begin="mouseover" end="mouseout"/>
</rect>
<rect x="205" y="10" width="150" height="150" rx="15" ry="15" 
      fill="red">
   <set attributeName="fill" from="red" to="blue" 
         begin="mousedown" end="mouseup"/>

To change the colors, we used the <set> tag. The <set> allows you to change any of the attributes of the preceding tag. By changing the attributeName we can have a variety of different effects.

These examples show changes in x, y, width, height, rx, and ry. In the next lesson we will changing different types of attributes over periods of time.

Exercises: