SVG 过滤动画，鼠标悬停和离开时带有过渡

Question

我想应用带有过渡的 SVG 滤镜。我希望它在鼠标位于其上时应用并在鼠标离开时丢弃。我试过这段代码，但没有用。我该怎么做？

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

当您可以在 SMIL 中完成所有操作时，您正在尝试混合使用 SMIL 和 javascript。

<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>

SVG 过滤动画，鼠标悬停和离开时带有过渡

SVG Filter animation with transition when mouse over and leave

javascript

svg

filter

svg-animate