10

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

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

4
  • 1
    Через скрытый checkbox?
    – Node_pro
    14 янв 2017 в 16:48
  • Дело в том что что бы изменить цвет обратно нужно запомнить предъидущее состояние, то есть его где-то хранить. И вот с этим работает javascript. Либо хранить не предъидущее состояние но то что цвет был изменён. А как можно это сохранить без Javascript? Думаю никак. 14 янв 2017 в 16:53
  • "Как сделать тоже самое на чистом SVG, SMIL не используя - javascript, CSS" - не понял, что именно не надо использовать. Я думал, что вопрос в том, как сделать без SMIL (он уже deprecated и для его работы надо подключать полифилы) и без скриптов одновременно. Или тире лишнее и надо использовать SMIL, но нельзя js и css? Если так, то в чём смысл затеи?
    – Qwertiy
    14 янв 2017 в 17:23
  • Да, именно так - без js и css, только SMIL.Мой пример выше именно использует SMIL, так что он пока поддерживается хромом. И отложили пока в гугле на неопределенное время deprecated SMIL 14 янв 2017 в 17:47

2 ответа 2

6
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;
}
<label>  
  <input type=checkbox id=red>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"> 
    <circle id="shape" class="seat" cx="120" cy="125" r="50" />
  </svg> 
</label>

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

В примере выше получился клик по всему 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;
}
<label>
  <input type=checkbox id=red>
  <svg viewBox="0 0 250 250">
    <circle id="shape" class="seat" cx="120" cy="125" r="50" />
  </svg>
</label>

Если внутри одного 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;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
  <rect x="0" y="0" width="100%" height="125" fill="silver" />
  <foreignObject x="0" y="0" width="100%" height="100%">
    <label xmlns="http://www.w3.org/1999/xhtml">
      <input type=checkbox id=red>
      <svg viewBox="0 0 250 250">
        <circle id="shape" class="seat" cx="120" cy="125" r="50" />
      </svg>
    </label>
  </foreignObject>
</svg>

6
  • как это работает ? не понятно? где и как обрабатывается клик по элементу?
    – spectre_it
    14 янв 2017 в 17:00
  • @stack-it, упс.. клик по всему svg, не по кругу. Не уверен, что можно по кругу сделать...
    – Qwertiy
    14 янв 2017 в 17:01
  • @Qwertiy красиво, но всё же есть CSS в ответе. Найти решение с поставленными условиями, было бы по настоящему круто. 14 янв 2017 в 17:13
  • @stack-it, дополнил ответ вариантом с кругом.
    – Qwertiy
    14 янв 2017 в 17:19
  • 1
    @Alexandr_T, дополнил ответ. Теперь кликабелен только круг и есть восзможность разместить несколько таких.
    – Qwertiy
    14 янв 2017 в 17:20
4

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

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

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

<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" 
> 
     <g  id="svg1">
        <rect  width="100%" height="100%" fill="white">   </rect>		         
         <text  x="98" y="17" font-size="11" font-family="Ariel" text-anchor="middle" 
        fill="green" stroke="grey" stroke-width="0.5px" >Click me</text>	 
	 </g>	
	 <circle id="crc"  cx="120" cy="125" r="50" style="fill: dodgerblue; stroke:black; stroke-width:2;" >
		 <animate id="an1" attributeName="fill" to="red" fill="freeze" begin="crc.click"   dur="0.01s" /> 
	     <animate id="an2" attributeName="fill" to="dodgerblue" fill="freeze" begin="svg1.click"   dur="0.01s" /> 
	  </circle> 
   </svg> 

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

   <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" 
> 
    <rect id="svg1" width="100%" height="100%" fill="white">   </rect>		         
  <circle id="crc"  cx="120" cy="125" r="50" style="fill: dodgerblue; stroke:black; stroke-width:2;" >
	 <animate id="an1" attributeName="fill" to="red" fill="freeze" begin="tored.click"   dur="0.01s" /> 
     <animate id="an2" attributeName="fill" to="dodgerblue" fill="freeze" begin="dodger.click"   dur="0.01s" /> 
 </circle> 
 <circle id="tored"  cx="100" cy="30" r="8" style="fill: red; stroke:black; stroke-width:1;" />
 <circle id="dodger"  cx="150" cy="30" r="8" style="fill: dodgerblue; stroke:black; stroke-width:1;" />
 
   </svg> 

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.