Замена цвета элемента SVG туда и обратно при клике

#javascript #css #svg #анимация

Этот вопрос задавался много раз и есть хорошие решения при помощи использования 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)";
  }
}
  
 
   




Всё отлично работает, с помощью скриптов можно сделать очень много.

Внимание вопрос

Как сделать тоже самое на чистом SVG (SMIL), не используя javascript и CSS.

Просто сменить цвет по клику не составляет труда:



 




Но как сменить цвет обратно, повторно кликая по объекту не приходит в голову.
    

Ответы

Ответ 1

if (shape.style.fill == "rgb(29, 172, 249)")



Так лучше не надо. А то кто-нибудь вернёт 1DACF9 вместо rgb(29, 172, 249) и всё.


  Как сделать тоже самое на чистом SVG, SMIL не используя - javascript, CSS




label {
  display: block;
}

#red {
  display: none;
}

svg {
  width: 250px;
  display: block;
}

#shape {
  fill: green;
  stroke: black;
  stroke-width: 2;
}

#red:checked + svg #shape {
  fill: red;
}
  
  
   






  где и как обрабатывается клик по элементу?


В примере выше получился клик по всему svg.
Чтобы это исправить, можно воспользоваться pointer-events.



label {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#red {
  display: none;
}

svg {
  width: 250px;
  display: block;
}

foreignObject svg {
  pointer-events: none;
}

#shape {
  fill: green;
  stroke: black;
  stroke-width: 2;
  pointer-events: all;
}

#red:checked + svg #shape {
  fill: red;
}

  
  





Если внутри одного svg надо разместить несколько таких объектов, можно воспользоваться
foreignObject, однако следует отметить, что его поддержка браузерами весьма сомнительна.



label {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#red {
  display: none;
}

svg {
  width: 250px;
  display: block;
}

foreignObject svg {
  pointer-events: none;
}

#shape {
  fill: green;
  stroke: black;
  stroke-width: 2;
  pointer-events: all;
}

#red:checked + svg #shape {
  fill: red;
}



Ответ 2

Два варианта ответа, но каждый из них не полностью соответствует поставленной задаче.
Привожу их, может быть примеры кому-то помогут найти  нужный ответ. 

Вынужден давать их, так как торопят с закрытием вопроса. Решение где-то рядом. Прошу
еще немного времени.   

Первый вариант



 




Второй вариант