Как сделать для SVG элемента изменение цвета при клике на кнопке

#javascript #html #svg #анимация #toggle

Обычный toggleClass или проверить его hasClass?

Суть вопроса ....

Имеем  с width и height fill без разницы какой, смысл в том, что при клике
на одну и туже кнопку менять fill с одного на другой.

Есть ли такая возможность ?
    

Ответы

Ответ 1

#1 вариант

Два цвета










#2 вариант

Несколько цветов


  





Ответ 2

Заполнение произвольной части фигуры SVG случайным цветом

В фигуре утенка есть несколько патчей, выбираем произвольный патч, например тело
утенка и присваиваем ему id="duck"
Этот патч будет закрашиваться случайно выбранным цветом при нажатии на кнопку id="btn"  

Формирование случайного цвета реализуется :

red = Math.round(Math.random() * 255);
green = Math.round(Math.random() * 255);
blue = Math.round(Math.random() * 255);    





	  
 






Заполнение случайным цветом секторов окружности

В этом примере окружность разбита на 6 секторов. Каждый сектор заполняется случайным
цветом при нажатии на кнопку, как в примере выше с утенком.  



var button = document.getElementById("btn");
 var one = document.getElementById("one");
 var two = document.getElementById("two");
 var three = document.getElementById("three");
 var four = document.getElementById("four");
 var five = document.getElementById("five");
 var six = document.getElementById("six");
 
  button.addEventListener("click", function(e) {
   red = Math.round(Math.random() * 255);
   green = Math.round(Math.random() * 255);
    blue = Math.round(Math.random() * 255);
  one.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
  two.setAttributeNS(null,"fill","rgb("+ (red / 0.9) +","+ (green * 0.9)+","+(blue
* 0.9)+")");
  three.setAttributeNS(null,"fill","rgb("+ (red * 0.8) +","+ (green / 0.8)+","+(blue
* 0.8)+")");
  four.setAttributeNS(null,"fill","rgb("+ (red * 0.7) +","+ (green * 0.7)+","+(blue
/ 0.7)+")");
  five.setAttributeNS(null,"fill","rgb("+ (red * 0.6) +","+ (green / 0.6)+","+(blue
* 0.6)+")");
  six.setAttributeNS(null,"fill","rgb("+ (red / 0.5) +","+ (green * 0.5)+","+(blue
* 0.5)+")");
  
   });



Ответ 3

Оптимизированный сниппет @Alexandr'a:



var button = document.getElementById("btn");
var paths = document.getElementsByClassName("path");

button.addEventListener("click", function() {
  for (var i = 0; i < paths.length; i++) {
    r = Math.round(Math.random() * 255);
    g = Math.round(Math.random() * 255);
    b = Math.round(Math.random() * 255);
    paths[i].setAttribute("fill", "rgb(" + r + "," + g + "," + b + ")");
  }
});