Как изменить цвет SVG при клике на кнопку?

Question

[rinatoptimus]

Цвет при клике на кнопку меняется, но надо, чтоб при повторном нажатии цвет менялся обратно на исходный. К примеру, нажали на кнопку - белая фигура стала синей, нажали на кнопку еще раз - она стала опять белой. Пробовал toggle, не получается. Это с SVG прокатывает? Пример здесь

Answer 1

[Петр]

C svg прокатывает только в том случае, если вы не задали цвет в самом svg, а вы это сделали.
Заданный в svg цвет через CSS переопределить нельзя. Если только вы не меняете значение атрибута с помощью js

Comments

[rinatoptimus]

Но я убирал fill, выносил его в класс и не работает. К сожалению, все примеры, которые нашел показывают изменение цвета при клике по самому элементу.

[Петр]

rinatoptimus: jsfiddle.net/P6t2B/288 Test 3 (Path3)

[rinatoptimus]

Петр: К сожалению, элемент исчезает полностью, а не меняет цвет.

[Петр]

rinatoptimus: Так меняет jsfiddle.net/P6t2B/290

Answer 2

[Рома]

Вот код для твоего примера, проверяешь СВГ по РГБ, т.к Хекс не воспринимается.

$('#btn-test1').on("click", function() {
	if( $('#path1').css('fill') == "rgb(255, 0, 0)"){
  	$('#path1').css({ fill: "#ffffff" });
  }else{
  	$('#path1').css({ fill: "#ff0000" });
  }    
});

Исходник : jsfiddle.net/P6t2B/289