Dodaj zajęcia do elementu ścieżki SVG

Question

W moim projekcie mam mapę świata SVG z różnymi ścieżkami o różnych identyfikatorach i jedną klasę map-path. Dla każdego kraju kliknij Chcę dodać klasę na każdej ścieżce. Moje HTML jest tak:

<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

addClass() funkcja JQuery nie będzie tu pracować i nie można dodać klasę do formatu SVG.

Zastosowanie .attr() zamiast:

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

Można użyć czystego roztworu js z setAttribute() metody:

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

Albo użyć classList.add() który działa w nowoczesnych przeglądarek:

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

nadzieję, że ten pomaga.