我正在尝试创建一个动态模糊效果,可以使用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" /> 从HTML中删除原始的stdDeviation使得它在更改后只有一个属性,但它没有任何效果.

接下来,我尝试用新的内容替换过滤器的内容:

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

这一次,它不仅没有成功改变,而且它导致应用此滤波器的元素完全消失(我假设滤波器已损坏,或者某些).

对于之前的两种情况,我甚至尝试在之后重新应用过滤器的css声明.

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

所以,我的问题是...有没有一种很好的方法来动态修改SVG过滤器(在我的情况下,特别是模糊过滤器)使用javascript？如果存在,在语义和标准方面是否是一种可敬的方法？如果不出意外,我更愿意回到我的解决方案,即使用一些(我可以不带小数)过滤器并将它们交换掉,但我想首先探索我的选择.

或者,如果您没有解决方案,但至少可以向我解释为什么我的第一次尝试不起作用,请告诉我!我好奇原因是什么.

语境：

给定这样的项目结构：

? src
??? a
? ??? module.js
??? b
? ??? module.js
??? util.js

其中两个module.js文件都导入util.js，使用以下配置：

export default {
    experimentalCodeSplitting: true,
    input: [
        'src/a/module.js',
        'src/b/module.js'
    ],
    output: {
        dir: 'bundle',
        format: 'esm'
    }
};

输出结构如下：

? bundle
??? chunk-af6d88c4.js
??? module.js
??? module2.js

问题：

当使用代码拆分来减少项目中的冗余代码时，如果不同目录中有多个具有相同文件名的模块，当汇总写入输出目录时，它会创建一个扁平结构。它足够聪明，可以识别多个文件具有相同的名称，并附加一个数字来区分它们。虽然这是工作代码，但在需要它们的页面上维护对这些模块的引用变得困难 - 开发人员必须知道哪个编号对应于哪个文件。

有没有办法在输出多个包时进行汇总以保留文件夹结构，以更清楚地显示文件关系？或者，如果仅通过汇总无法做到这一点，是否可以采用另一种解决方案？