Как правильно изменить 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" изменится на зеленый цвет.

@ransom_homenick 

Код, который я предоставила, не будет работать для изменения fill у SVG элемента, так как fill - это свойство, которое применяется к фигурам внутри SVG элемента, а не самому SVG элементу. Для изменения fill у фигуры в SVG элементе необходимо выбрать эту фигуру внутри SVG элемента.

Вот пример, как изменить fill у конкретной фигуры внутри SVG элемента по клику:

HTML:

1
2
3
4
5

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

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

JavaScript:

1
2
3
4
5
6

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

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

В этом примере при клике на кнопку "Click me" fill у прямоугольника внутри SVG элемента изменится на зеленый цвет.