Изменить цвет прямоугольника SVG с помощью JS

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>

сильный текст Но у меня сохраняется эффект "моргания", целевой прямоугольник становится синим на 0,01 с, кто-нибудь знает, что вызывает это?

Answer 1

Хорошо, только моя кнопка с type = "submit" перезагружала мою страницу при каждом вызове.

Установите type = "button", и все идет хорошо

Answer 2

Я не совсем уверен, что это то, что вам нужно, поскольку ваш пример не является функциональным примером.В любом случае: вот как вы меняете цвет с помощью JavaScript:

1. вы можете изменить стиль фигуры

2. вы можете изменить значение атрибута.

Надеюсь, это поможет.

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>