javascript - 单击 svg poly 更改填充属性

Question

我在 svg 上绘制了人体部位图并将其集成到我的 html 中:

<div id="human_body_container" style="width:145px; height: 250px;">
<svg id="human_body" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/" x="0px" y="0px"
     viewBox="0 0 145 250">
<style>
    .st0{stroke:#010101;stroke-width:0.4;stroke-miterlimit:10;}
</style>
<g id="Skull">
    <polygon id="XMLID_25_" class="st0" points="59.2,9.4 69.5,11 75.4,11 80.4,10.2 79.2,6.4 75.3,2.8 72.3,1.4 67.2,1.4 61.4,5 
    59.9,6.9 "/>
</g>
<g id="Right_ear">
    <polygon id="XMLID_24_" class="st0" points="60.7,24.7 61.3,20.7 59.7,15.9 58.7,15.9 57.5,17.5 57.5,22.2 "/>
</g>

我所有的 poly 都有 st0 类，这是 css :

.st0 {
fill: rgba(230,230,230, 0.5);
transition: .3s;
}

.st0:hover { 
fill: rgba(180,180,180, 1);
cursor: pointer;
}

我只想在用户点击它时更改一个多边形的颜色，所以我使用以下 javascript (jQuery):

$(document).on('click', '.st0', function () {
$(this).attr('fill', 'red');
console.log('fill');
console.log($(this));
});

点击事件被触发，多边形返回到控制台，但填充颜色没有改变，知道为什么以及如何解决这个问题吗？

Answer 1

fill 是一个 CSS 属性，因此您需要使用 css() 方法设置它:

$(document).on('click', '.st0', function() {
    $(this).css('fill', 'red');
});

Example fiddle