我试图在有人点击某个路径时填充 SVG，然后在有人第二次点击时将填充颜色重置为默认值，我已经成功添加了点击时填充颜色的功能，但一直有问题第二次点击时将填充颜色重置为默认值；下面是我目前的代码，它的工作原理相反，不是在第一次点击时应用填充颜色并在第二次点击时重置，而是在第一次点击时重置填充颜色并在第二次点击时应用填充颜色，这是与我想要的结果相反。
jQuery('#color-my-svg').on("click", function() {
if(!jQuery(this)[0].hasAttribute('style')){
jQuery('#color-my-svg').css({ fill: "#ff0000" });
}
else{
jQuery(this).removeAttr('style');
}
});
我想在点击时应用填充颜色然后在第二次点击时重置填充颜色来达到预期的效果。
最佳答案
检查这个可能对你有帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mysvg{
fill:red;
}
#mysvg.color-swatcher{
fill:green;
}
</style>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#mysvg').on('click', function(){
$(this).toggleClass('color-swatcher');
})
});
</script>
</body>
</html>关于jquery - 单击时替代 SVG 填充颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58074235/