SVG Filter animation with transition when mouse over and leave

Question

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?

var rect = document.querySelector("rect")
var use = document.querySelector("#fs")

rect.addEventListener("mouseover", () => {
  rect.setAttribute("filter","url(#filter)")
  use.setAttribute("href","startA")
})

rect.addEventListener("mouseleave", () => {
  rect.setAttribute("filter","")
  use.setAttribute("href","stopA")
})

<svg width="400" height="400">
  <defs>
    <animate id="startA" attributeName="stdDeviation" values="0;10" dur="1s"></animate>
    <animate id="stopA" attributeName="stdDeviation" values="10;0" dur="1s"></animate>
  </defs>
  <filter id="filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10">
      <use id="fs"/>
    </feGaussianBlur>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  
  <rect x="50" y="50" width="180" height="180" fill="#4a8"></rect>  
</svg>

Answer 1

You're trying to mix SMIL and javascript when you can do the whole thing in SMIL.

<svg width="400" height="400">
  <filter id="filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0">
    <animate begin="r.mouseover" attributeName="stdDeviation" values="0;10" dur="1s" fill="freeze"></animate>
    <animate begin="r.mouseout" attributeName="stdDeviation" values="10;0" dur="1s" fill="freeze"></animate>
    </feGaussianBlur>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  
  <rect id="r" x="50" y="50" width="180" height="180" fill="#4a8" filter="url(#filter)"></rect>  
</svg>