我正在尝试在有人单击某个路径时填充 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>