title: SVG Filter animation with transition when mouse over and leave
body: <p>I want to apply an SVG filter with a transition. I want it to be applied when the mouse is on it and discarded when the mouse left it. I've tried this code but it didn't work. How can I do that?</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-js lang-js prettyprint-override"><code>var rect = document.querySelector("rect")
  var use = document.querySelector("#fs")
  
  rect.addEventListener("mouseover", () =&gt; {
    rect.setAttribute("filter","url(#filter)")
    use.setAttribute("href","startA")
  })
  
  rect.addEventListener("mouseleave", () =&gt; {
    rect.setAttribute("filter","")
    use.setAttribute("href","stopA")
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="400" height="400"&gt;
    &lt;defs&gt;
      &lt;animate id="startA" attributeName="stdDeviation" values="0;10" dur="1s"&gt;&lt;/animate&gt;
      &lt;animate id="stopA" attributeName="stdDeviation" values="10;0" dur="1s"&gt;&lt;/animate&gt;
    &lt;/defs&gt;
    &lt;filter id="filter"&gt;
      &lt;feGaussianBlur in="SourceGraphic" stdDeviation="10"&gt;
        &lt;use id="fs"/&gt;
      &lt;/feGaussianBlur&gt;
      &lt;feMerge&gt;
        &lt;feMergeNode/&gt;
        &lt;feMergeNode in="SourceGraphic"/&gt;
      &lt;/feMerge&gt;
    &lt;/filter&gt;
    
    &lt;rect x="50" y="50" width="180" height="180" fill="#4a8"&gt;&lt;/rect&gt;  
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>