SVG - Interactivité

Les images SVG peuvent être adaptées aux actions de l'utilisateur. SVG prend en charge les événements de pointeur, les événements de clavier et les événements de document. Prenons l'exemple suivant.

Exemple

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" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Explication

  • SVG prend en charge les fonctions JavaScript / ECMAScript. Le bloc de script doit être dans le bloc CDATA, prendre en compte la prise en charge des données de caractères dans XML.

  • Les éléments SVG prennent en charge les événements de souris, les événements de clavier. Nous avons utilisé l'événement onClick pour appeler une fonction javascript.

  • Dans les fonctions javascript, le document représente un document SVG et peut être utilisé pour obtenir les éléments SVG.

  • Dans les fonctions javascript, l'événement représente l'événement actuel et peut être utilisé pour obtenir l'élément cible sur lequel l'événement a été déclenché.

Production

Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG. Cliquez sur chaque texte et rectangle pour voir le résultat.