Aggiungi classe su elemento percorso svg

Question

Nel mio progetto ho una mappa mondiale SVG con percorsi diversi con ID diversi e una classe di map-path. Per ogni paese, fare clic su Voglio aggiungere una classe su ciascun percorso. Il mio HTML è come questo:

<svg viewBox=""> 
    <path id="map_1" class="map-path" ......> 
    <path id="map_2" class="map-path" ......> 
    <path id="map_3" class="map-path" ......> 
    <path id="map_4" class="map-path" ......> 
    <!-- more <path /> elements... --> 
</svg> 

Answer 1

funzione di JQuery addClass() non funziona qui e non si può aggiungere una classe a uno SVG.

Uso .attr() invece:

$('body').on('click','.map-path',function() { 
    $(this).attr("class", "map-path newclass"); 
}); 

Si potrebbe utilizzare una soluzione js pura con setAttribute() metodo:

$('body').on('click','.map-path',function(e) { 
    e.target.setAttribute("class", "map-path newclass"); 
}); 

Oppure utilizzare classList.add() che funziona nei browser moderni:

$('body').on('click','.map-path',function(e) { 
    e.target.classList.add('newclass'); 
}); 

Spero che questo aiuta.