Этот вопрос задавался много раз и есть хорошие решения при помощи использования javascript
, например такой код:
var shapeClick = document.getElementById("shape").addEventListener("click", changeColor);
var clicks = 0;
function changeColor(){
if (shape.style.fill == "rgb(29, 172, 249)")
{
shape.style.fill = "rgb(255, 0, 0)";
}
else {
shape.style.fill = "rgb(29, 172, 249)";
}
}
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="250" height="250" viewBox="0 0 250 250"
>
<circle id="shape" class="seat" cx="120" cy="125" r="50" style="fill: #1dacf9" stroke="black" stroke-width="2" />>
</svg>
</div>
Всё отлично работает, с помощью скриптов можно сделать очень много.
Внимание вопрос
Как сделать тоже самое на чистом SVG (SMIL)
, не используя javascript
и CSS
.
Просто сменить цвет по клику не составляет труда:
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="250" height="250" viewBox="0 0 250 250"
>
<circle cx="120" cy="125" r="50" style="fill: dodgerblue; stroke:black; stroke-width:2;" >
<animate attributeName="fill" from="dodgerblue" to="red" fill="freeze" begin="svg1.click" dur="0.1s" calcMode="discrete"/>
</circle>
</svg>
Но как сменить цвет обратно, повторно кликая по объекту не приходит в голову.