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;
}

我想在用户点击时更改一个poly的颜色，所以我使用以下javascript（jQuery）：

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

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

Answer 1

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

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

Example fiddle

单击svg poly时更改填充属性

1 个答案: