单击 img 标签更改 svg 图像颜色

【问题标题】：Change svg image color on click in img tag单击 img 标签更改 svg 图像颜色
【发布时间】：2019-07-14 23:52:25
【问题描述】：

在这里，我试图在单击标签时更改 SVG 图像的颜色。这是小提琴https://jsfiddle.net/uk72ftxa/

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

【问题讨论】：

标签： jquery image svg

【解决方案1】：

您可以尝试在点击时为您的图片添加过滤器：

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

&lt;img id="img" src="http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg"  style="cursor:pointer" &gt;

如果你需要改变颜色，你可以这样做：

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

&lt;img id="img" src="http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg"  style="cursor:pointer" &gt;

【讨论】：