主页 / 问题 / 614587
Accepted
Alexandr_TT
Asked:2020-01-14 19:26:52 +0000 UTC2020-01-14 19:26:52 +0000 UTC

单击时来回交换 SVG 元素颜色

  • 772

这个问题已经被问过很多次了，使用 有很好的解决方案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)不使用javascriptand的情况下在 pure 上做同样的事情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>

但是我并没有想到如何通过反复点击对象来改变颜色。

javascript

2 个回答

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

    所以最好不要。然后有人会返回，仅此1DACF9而已rgb(29, 172, 249)。

    如何在不使用 javascript、CSS 的情况下在纯 SVG、SMIL 上执行相同操作

    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>

    在哪里以及如何处理元素上的点击？

    在上面的例子中，结果是点击了 all 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

  2. 两个可能的答案，但每个答案都不完全符合任务。我给他们，也许例子会帮助别人找到正确的答案。

    我被迫给他们，因为他们急于结束这个问题。解决方案就在这里。我要求多一点时间。

    第一个选项

    <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>

    • 3

相关问题