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.

Small red SVG circle

Clicking the circle causes it to grow to twice its size.

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()"/>
 ...

Samples and tutorials

Basic SVG animation
Intermediate SVG Animation
Advanced SVG Animation
How to Zoom and Pan with SVG

Related topics

SVG

 

 

Show:
© 2014 Microsoft