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

我已经在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));
});

触发了click事件，并且在控制台中返回了poly，但是填充颜色没有改变，不知道为什么以及如何解决这个问题？

最佳答案

fill是CSS属性，因此您需要使用css()方法进行设置：

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

Example fiddle

关于javascript - 单击svg poly时更改填充属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34610230/