jquery - 如何在第二次单击时重置 SVG 颜色

Question

我用它来填充点击时的 svg :

jQuery('#color-my-svg').on("click", function() {
    jQuery('#color-my-svg').css({ fill: "#ff0000" });

当用户第二次单击按钮时将颜色重置为默认值的最简单方法是什么？

Answer 1

实现此目的的最简单方法是使用 CSS 类设置 fill，然后在单击时切换该类:

$('#color-my-svg').on("click", function() {
  $(this).toggleClass('foo');
});

svg rect {
  fill: #CCC;
}
.foo {
  fill: red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
  <rect id="color-my-svg" x="10" y="10" width="100" height="100" stroke="black" />
</svg>