Question

我希望该SVG图标的填充颜色在单击时更改，并在再次单击时更改回。我该怎么做呢？我最好是使用Javascript来做到这一点。

.remove svg{
  fill: gray;
  opacity: 0.8;
  height: 50px;
  width: 45px;
}
.remove svg:hover{
  fill: red;
  opacity: 0.7;
  transition-duration: 0.3s;
}
 button{
  appearance: none;
  width: 47.5px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  background: white;
  border: none;
  cursor: pointer;
}

    <button class="remove">
     <svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve">
		<polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651 
			164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466"/>
      </svg>
    </button>

Answer 1

我仅通过添加“ clicked”类来修改了CSS代码，并且还编写了一个简单的JS脚本。这是您可以通过JS执行的操作：

.remove svg{
  fill: gray;
  opacity: 0.8;
  height: 50px;
  width: 45px;
}
.remove.clicked svg{
  fill: red;
  opacity: 0.7;
  transition-duration: 0.3s;
}
 button{
  appearance: none;
  width: 47.5px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  background: white;
  border: none;
  cursor: pointer;
}

    var button = document.querySelector("button");

    button.addEventListener("click", function(){
        this.classList.toggle("clicked");
    });

切换SVG图标的颜色

1 个答案: