Как сбросить SVG цвет по второму клику

Question

Я использую это, чтобы заполнить svg при клике:

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

, что является самым простым способом восстановить цвет по умолчанию, когда пользователь нажимает кнопку во второй раз?

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>

Answer 2

Этот код может быть полезен ...

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

Answer 3

Попробуйте: -

var change_color = 0;
jQuery('#color-my-svg').on("click", function() {
if(change_color==0){
    jQuery('#color-my-svg').css({ fill: "#ff0000" });
    change_color = 1;
    }
else{
jQuery('#color-my-svg').css({ fill: "blue" });
    change_color = 0;
}