SVG 过滤动画，当鼠标悬停并离开时带有过渡答案

【问题标题】：SVG Filter animation with transition when mouse over and leaveSVG 过滤动画，当鼠标悬停并离开时带有过渡
【发布时间】：2021-10-20 15:03:01
【问题描述】：

我想应用带有过渡效果的 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>

【问题讨论】：

标签： javascript svg filter svg-animate

【解决方案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 元素是使用 Javascript 创建的。在 javascript 中，一个一个地创建所有的过滤器元素意味着大量的代码。我可以使用这个快捷方式吗？我尝试使用 mouseover 事件添加过滤器和开始属性，但没有成功。
也用 javascript 创建过滤器。