JavaScript et SVG : rendre des éléments SVG interactifs avec JavaScript

Dans cet exemple la manipulation se fait sur un dessin SVG contenu dans un fichier externe.

Cliquer sur un des éléments interactifs du visage pour voir le nom en anglais.

You have not clicked yet!

Code

   //Identifier le SVG à travers l'id de la balise object
  var svg = document.getElementById("faceSVG");
  //Identifier la zone pour le feedback
  var feedback = document.getElementById("feedback");
  //Car il s'agit d'un élément externe, attendre onload
  svg.onload = function () {
    //Acceder au DOM du SVG externe avec contentDocument;
    var face = svg.contentDocument;
    //Créer un array avec les éléments interactifs du SVG, le nom est également l'id
    var faceElements = ['hat', 'glasses', 'moustaches', 'beard'];
    //Créer une boucle pour chaque élément de l'array
    faceElements.forEach(function (el) {
      //Identifier l'élément dans le DOM du SVG
      var current = face.getElementById(el);
      //Associer un événement mouseover pour changer le curseur de la souris
      current.onmouseover = function () {
          current.style.cursor = "pointer";
      }
      //Associer un événement click pour changer le texte du feedback.
      current.onclick = function () {
          feedback.innerHTML = "You clicked on the " + el.toUpperCase();
      }
    });
  }