Čítať v angličtine

Zdieľať cez

Interactivity

  • Článok

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.

XML 
<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.

HTML 
...
  <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

SVG