Bir svg'deki nesneler için olay dinleyicileri nasıl eklenir?

Question

Etkileşimli bir svg görüntüleyen bir web sayfası oluşturmak istiyorum: birkaç svg kullanılabileceğinden, görüntülenen çeşitli nesneler farklı kimliklere sahip olacaktır, böylece olay dinleyicileri (örneğin bir fare tıklatmasını yakalamak için) dinamik olmalıdır. this snippet

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); 

başlayarak

ben (belki belli bir sınıf olan) svg tüm nesneler arasında geçiş için bir yol bulmak ve onlara eşit dinleyicisi eklemek istiyorum.

güncelleme

Yani JQuery 'her' işlevi uygun bir seçenek olabilir, ancak JQuery çok iyi svg DOM işlemez gibi görünüyor. Başka bir seçenek var mı? (Bir JQuery eklentisi gibi?) Eğer mevcut örnek kod burada biraz yapmacık olmakla

// 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 
} 

Answer 1

Bu vanilya js ile unsurlarını SVG olay dinleyicileri eklemek için benim tercih yapıdır ... bir yeniden yazma olduğunu çalışmasını sağlar ...

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);