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

Пользователь

от ransom_homenick , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от hermina.hauck , год назад

@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" изменится на зеленый цвет.

Пользователь

от linnea , месяц назад

@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 элемента изменится на зеленый цвет.