Comment ajouter des auditeurs d'événements à des objets dans un svg?

Je voudrais créer une page Web affichant un svg interactif: puisque plusieurs svg peuvent être utilisés, les différents objets affichés auront des ID différents, de sorte que les auditeurs de l'événement (pour attraper un clic de souris, par exemple) doivent être dynamiques.

À partir de cet extrait

var a = document.getElementById("alphasvg"); a.addEventListener("load",function(){ var svgDoc = a.contentDocument; var delta = svgDoc.getElementById("delta"); delta.addEventListener("click",function(){alert('hello world!')},false); },false);

Je voudrais trouver un moyen de parcourir tous les objets du svg (peut-être ayant une classe particulière) et de lui joindre un auditeur pair.

mettre à jour

Donc JQuery 'chaque' fonction peut être une option appropriée, mais il semble que JQuery ne gère pas très bien le svg DOM. Existe-t-il d'autres options disponibles? (Comme un plugin JQuery?)

C'est ma structure préférée pour ajouter des auditeurs d'événements aux éléments SVG avec vanille js …

 // select elements var elements = Array.from(document.querySelectorAll('svg .selector')); // add event listeners elements.forEach(function(el) { el.addEventListener("touchstart", start); el.addEventListener("mousedown", start); el.addEventListener("touchmove", move); el.addEventListener("mousemove", move); }) // event listener functions function start(e){ console.log(e); // just an example } function move(e){ console.log(e); // just an example }

L'exemple de code que vous présentez est quelque peu conçu, mais voici une réécriture qui le fait fonctionner …

 var a = document.getElementById("alphasvg"); a.addEventListener("load",function(){ var svgDoc = a.contentDocument; var els = svgDoc.querySelectorAll(".myclass"); for (var i = 0, length = els.length; i < length; i++) { els[i].addEventListener("click", function(){ console.log("clicked"); }, false); } },false);