SVG - Interactivity-alljchome-开发者的教程家园

SVG Tutorial

SVG Demo

SVG Useful Resources

Selected Reading

SVG - Interactivity

SVG images can be made responsive to user actions. SVG supports pointer events, keyboard events and document events. Consider the following example.

Example

testSVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onCpck="showColor()">Cpck me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onCpck="showArea(event)"/>
            
            <text x="30" y="400" onCpck="showRootChildrenCount()">
            Cpck me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Explaination

SVG supports JavaScript/ECMAScript functions. Script block is to be in CDATA block consider character data support in XML.

SVG elements support mouse events, keyboard events. We ve used onCpck event to call a javascript functions.

In javascript functions, document represents SVG document and can be used to get the SVG elements.

In javascript functions, event represents current event and can be used to get the target element on which event got raised.

Output

Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering. Cpck on each text and rectangle to see the result.