Question

我有这段代码可以更新SVG颜色，这是我的代码

由于我的svg的一个例子更大，经典形式还有我的js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<rect
  class="tooltip"
   id="b2"
   y="60"
   x="991.1"
   height="18.01792"
   width="9.3939571"
   transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
   />

<rect
  class="tooltip"
   id="b3"
   y="80"
   x="979.58966"
   height="16.477926"
   width="9.8559551"
   transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
   />
   
<form id="nameForm">
 <input type="text" class="form-control" name="auto1" placeholder="enter state">
 <button type= "submit" id='valider'>Recherche</button>
</form>
<script>
 $('#valider').click( function(){
 var stringName = $("#nameForm").find('input[name="auto1"]').val();
 console.log(stringName);
 var keys = Object.keys(tdata);
 for (var z=1; z<keys.length+1; z++){
 if(tdata[keys[z]].Utilisateur.toUpperCase() == stringName.toUpperCase())
{
    console.log('OUI');
    document.getElementById(keys[z]).style.setProperty("fill", "blue", 
"important");

   }
 }
});
 </script>

strong文本 但是我一直保持“闪烁”效果，目标矩形在0.01秒内变为蓝色，有人知道这是什么原因吗？

Answer 1

我不是很确定这是您所需要的，因为您的示例不是功能示例。无论如何：这是您使用javascript更改颜色的方法：

您可以更改形状的样式
您可以更改属性值。

我希望这会有所帮助。

b2.addEventListener("mouseover",()=>{
  b2.style.fill="red";
})

b2.addEventListener("mouseleave",()=>{
  b2.style.fill="black";
})

b3.addEventListener("mouseover",()=>{
  b3.setAttributeNS(null,"fill","gold")
})

b3.addEventListener("mouseleave",()=>{
  b3.setAttributeNS(null,"fill","black")
})

<svg viewBox="980 50 100 100">
   <g id="g">
   <rect
  class="tooltip"
   id="b2"
   y="60"
   x="991.1"
   height="18.01792"
   width="9.3939571"
   transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
   />

<rect
  class="tooltip"
   id="b3"
   y="80"
   x="979.58966"
   height="16.477926"
   width="9.8559551"
   transform="matrix(1.2364454,0.42544171,-0.4470638,1.1766451,-178.37586,-424.08805)"
      />
   </g></svg>

Answer 2

好吧，只是我的类型为“ submit”的按钮才在每次调用时重新加载我的页面。

设置type =“ button”一切顺利

使用JS更改svg rect颜色

2 个答案: