Thêm lớp vào phần tử đường dẫn svg

Question

Trong dự án của tôi, tôi có bản đồ thế giới SVG với các đường dẫn khác nhau với các id khác nhau và một lớp là map-path. Đối với mỗi quốc gia, tôi muốn thêm lớp vào mỗi đường dẫn. HTML của tôi là như thế này:

<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

JQuery chức năng addClass() sẽ không làm việc ở đây và không thể thêm một lớp học để tập tin SVG lên.

Sử dụng .attr() thay vì:

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

Bạn có thể sử dụng giải pháp js tinh khiết với setAttribute() phương pháp:

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

Hoặc sử dụng classList.add() mà làm việc trong các trình duyệt hiện đại:

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

Hy vọng điều này giúp.