Interactivity
SVG content can be interactive—that is, it can change in response to user input.Windows Internet Explorer 9 introduced support for SVG interactivity features, as specified in the Interactivity module of the SVG 1.1 (Second Edition) specification, including:
Mouse events
- mousedown
- mouseup
- click
- mouseover
- mousemove
- mouseout
Cursor / pointer events
- focusin
- focusout
- activate
Internet Explorer 9 also introduced support for the SVGCursorElement DOM interface.
Additionally, Internet Explorer 9 and later versions support the focusable attribute as specified in the Interactivity module of the SVG Tiny 1.2 specification.
The following markup shows a very simple example of SVG interactivity in action.
<svg xmlns=http://www.w3.org/2000/svg
xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
height="600">
<script type="text/ecmascript">
<![CDATA[
// object representing circle
var redcircle;
// variable representing circle's radius
var r;
window.onload = function() {
redcircle = document.getElementById('redcircle');
r = parseInt(redcircle.getAttribute("r"));
}
var grow = function() {
r = 2*r;
redcircle.setAttribute("r",r);
}
var shrink = function() {
r = r/2;
redcircle.setAttribute("r",r);
}]]>
</script>
<circle id="redcircle" cx="100" cy="100" r="50" fill="red"
onmousedown="grow()" onmouseup="shrink()"/>
</svg>
When this snippet is loaded, it displays a small red circle.
.png "Small red SVG circle")
Clicking the circle causes it to grow to twice its size.
.png "Big red SVG circle")
The same effect can be achieved with mouseover and mouseout events, which will cause the circle to grow and shrink just by moving the cursor over and off of it.
...
<circle id="redcircle" cx="100" cy="100" r="50" fill="red"
onmouseover="grow()" onmouseout="shrink()"/>
...