svg पथ तत्व

Question

पर कक्षा जोड़ें मेरे प्रोजेक्ट में मेरे पास अलग-अलग आईडी और map-path की एक वर्ग के साथ विभिन्न पथों के साथ एक एसवीजी विश्व मानचित्र है। प्रत्येक देश के लिए क्लिक करें मैं प्रत्येक पथ पर कक्षा जोड़ना चाहता हूं। मेरे एचटीएमएल इस तरह है:

<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 समारोह addClass() यहाँ काम नहीं करेगा और एक एसवीजी करने के लिए एक वर्ग नहीं जोड़ सकते।

उपयोग .attr() बजाय:

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

आप शुद्ध js समाधान setAttribute() विधि के साथ इस्तेमाल कर सकते हैं:

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

या classList.add() कि आधुनिक ब्राउज़रों में काम करता है का उपयोग करें:

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

आशा इस मदद करता है.