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

Question

我正在使用它来填充单击时的 svg：

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

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

标签： jquerysvg

Answer 1

实现这一点的最简单方法是fill使用 CSS 类设置，然后在单击时切换该类：

$('#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>