javascript - 使用 javascript 动态修改 SVG 过滤器

Question

我正在尝试创建动态模糊效果，可以使用 javascript 即时修改。

首先，我使用这个非常简单的 svg 过滤器:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="0" />
</filter>
</svg>

stdDeviation 从 0 开始，我希望能够使用 javascript 更改它。我尝试了一些不同的东西，但我还没有完全确定。

首先，(我应该注意我使用的是 jQuery)我尝试简单地选择 feGaussianBlur 元素并修改它的属性:

$('feGaussianBlur').attr('stdDeviation',5);

这并没有像我预期的那样替换已经存在的属性，而是添加了另一个属性，给我留下了 <feGaussianBlur stdDeviation="0" stdDeviation="5" /> 把原来的 stdDeviation 从 HTML 中去掉使得改变后只有一个属性，但是没有效果。

接下来，我尝试用新过滤器简单地替换过滤器的内容:

$('filter#blur').html('<feGaussianBlur stdDeviation="5" />');

这一次，它不仅没有成功更改，而且还导致应用此过滤器的元素完全消失(我假设过滤器已损坏，或类似情况)。

对于之前的两种情况，我什至尝试过为过滤器重新应用 css 声明。

我尝试 DID 工作的一件事是构建 10 个不同的过滤器，具有 10 个不同的值，然后我没有使用 javascript 更改 SVG，而是将 css 重新分配给不同的过滤器 ID。老实说，这种做法似乎更..合适？但最大的缺点是它不是很通用，需要做很多工作才能改变。此外，我更喜欢使用带小数位的值，这需要 100 个过滤器声明才能完成。

所以，我的问题是...有没有一种使用 javascript 动态修改 SVG 滤镜(在我的例子中，特别是模糊滤镜)的好方法？如果存在，就语义和标准而言，它是否是一种值得尊敬的方法？如果没有别的，我非常愿意回到我的解决方案，即使用一些(我可以没有小数)过滤器并将它们换掉，但我想先探索我的选择。

或者，如果您没有解决方案，但至少可以向我解释为什么我的前几次尝试没有奏效，请告诉我!我很好奇原因是什么。

Answer 1

使用普通的 DOM 而不是 jquery 来做这件事会更简单。将id移动到feGaussianBlur元素

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter>
<feGaussianBlur id="blur" stdDeviation="0" />
</filter>
</svg>

然后

document.getElementById("blur").setAttribute("stdDeviation", "5");

或者替代地

document.getElementById("blur").setStdDeviation(5, 5);