Change svg rect color with JS

Question

I have this code where I gotta update a SVG color, here is my code

As an exemple of my svg with is much bigger, a classic form, And my 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 text But I keep having a "blink" effect, the targeted rectangle becomes blue for 0.01s, does anyone knows what causes this ?

The console is saying that `tdata` is not defined – J.vee Dec 05 '18 at 09:46 — J.vee, Dec 05 '18 at 09:46

score 1 · Answer 1 · answered Dec 05 '18 at 09:51

I'm not very sure this is what you need since your example is not a functional example. Anyway: this is how you change the color with javascript:

you may change the style of the shape
you may change the attribute value.

I hope this helps.

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>

in fact my code works and change the color of my rect item but only for a fraction of sec, and i want it to be definitive. TY anw — Aurele Collinet, Dec 05 '18 at 09:58

score 0 · Accepted Answer · answered Dec 05 '18 at 10:02

0

Ok it was just my button with type="submit" that was reloading my page on every call.

Set a type="button" and all is going well

answered Dec 05 '18 at 10:02

Aurele Collinet

138
1
16

Yes, that was my pb. Ty – Aurele Collinet Dec 07 '18 at 16:13

Change svg rect color with JS

2 Answers2