单击img标记时更改svg图像颜色

Question

在这里，我尝试更改来自标记的SVG图片的颜色。 这是小提琴https://jsfiddle.net/uk72ftxa/

 <img src="http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg"  style="cursor:pointer" >

Answer 1

您可以在单击时尝试为图像添加过滤器：

img.addEventListener("click",()=>{
  img.style.cssText = "filter:hue-rotate(120deg);cursor:pointer;"
})

<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg"  style="cursor:pointer" >

如果需要替换颜色，可以执行以下操作：

let angle = 120;
img.addEventListener("click",()=>{
  //let angle *= n%2 == 0 ? 120 : -120;
  angle *= -1;
  img.style.cssText = `filter:hue-rotate(${angle}deg);cursor:pointer;`
})

<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg"  style="cursor:pointer" >