Как правильно изменить fill у svg по клику с помощью javascript?

@ransom_homenick 

Для изменения fill у SVG элемента по клику с помощью JavaScript можно использовать методы свойства style.

Для начала необходимо получить ссылку на нужный элемент с помощью метода getElementById() или querySelector(). Затем можно изменить значение fill используя свойство style.fill.

Например, если есть SVG элемент с id="mySvg", который нужно изменить при клике на элемент с id="myButton", можно использовать следующий код:

HTML:

1
2
3
4
5

<svg id="mySvg" width="100" height="100">
  <rect width="100" height="100" fill="#ccc" />
</svg>

<button id="myButton">Click me</button>

JavaScript:

1
2
3
4
5
6

var mySvg = document.getElementById("mySvg");
var myButton = document.getElementById("myButton");

myButton.addEventListener("click", function() {
  mySvg.style.fill = "green";
});

В данном случае при клике на кнопку с id="myButton", fill у SVG элемента с id="mySvg" изменится на зеленый цвет.