title: Change svg rect color with JS
body: <p>I have this code where I gotta update a SVG color, here is my code</p>
  
  <p>As an exemple of my svg with is much bigger,
  a classic form,
  And my js :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;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)"
     /&gt;
  
  &lt;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)"
     /&gt;
     
  &lt;form id="nameForm"&gt;
   &lt;input type="text" class="form-control" name="auto1" placeholder="enter state"&gt;
   &lt;button type= "submit" id='valider'&gt;Recherche&lt;/button&gt;
  &lt;/form&gt;
  &lt;script&gt;
   $('#valider').click( function(){
   var stringName = $("#nameForm").find('input[name="auto1"]').val();
   console.log(stringName);
   var keys = Object.keys(tdata);
   for (var z=1; z&lt;keys.length+1; z++){
   if(tdata[keys[z]].Utilisateur.toUpperCase() == stringName.toUpperCase())
  {
      console.log('OUI');
      document.getElementById(keys[z]).style.setProperty("fill", "blue", 
  "important");
  
     }
   }
  });
   &lt;/script&gt;</code></pre>
  </div>
  </div>
  
  <strong>strong text</strong>
  But I keep having a "blink" effect, the targeted rectangle becomes blue for 0.01s, does anyone knows what causes this ?</p>