Можно ли менять цвета в SVG?

Question

[Igor Fedorov]

Добрый день. Можно ли средствами Jquery изменять цвета (заливки) некоторых элементов в SVG?

Допустим, есть несколько кнопок, например, красный, синий, фиолетовый, зелёный.
Чтобы по нажатию на них сменялся цвет одного элемента в SVG.

Заранее всем спасибо.

Answer 1

[Виталий Инчин ☢]

Получаете нужный элемент и elem.setAttribute("fill", color);.

<svg width="200" height="200">
  <rect width="100" height="100" x="50" y="50"
        fill="none" stroke="gold"
        stroke-width="10"/>
  <rect width="160" height="160" x="20" y="20"
        fill="none" stroke="yellowgreen"
        stroke-width="10%"/>
</svg>

<div>
    <button data-color="orange">Оранжевый</button>
    <button data-color="tomato">Томатный</button>
</div>

document.querySelector("div").onclick = function(e){
   var t = e.target;
   if(t.parentNode===this) 
       document.querySelector("rect").setAttribute("fill", t.dataset.color);
}

Вживую: jsfiddle.net/In4in/gyqpvwbu

а можно в Jquery это воплотить?

$("div").on("click", "button", function(){
       $("rect").attr("fill", $(this).data("color"));
});

Comments

[Igor Fedorov]

А как-то можно задать ID в SVG?

[Виталий Инчин ☢]

Igor Fedorov: конечно, это просто атрибут. Получаете элемент, изменяете id. По принципу выше.

[Igor Fedorov]

Виталий Инчин ☢: Спасибо. Вот только ещё вопрос. В SVG 2 элемента rect. Каким образом, не разобрался, мы получаем именно второй?

[Виталий Инчин ☢]

Igor Fedorov: на самом деле - первый (querySelector возвращает первое совпадение). Лучше задавать идентификаторы, это я быстро набросал просто :)

[Igor Fedorov]

Виталий Инчин ☢: понятно, спасибо вам огромное! :D

[Igor Fedorov]

Igor Fedorov: а можно в Jquery это воплотить?