Изменить цвет изображения SVG по клику в теге img

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" >