SVG元素上的CSS背景过滤器

我正在尝试向SVG

中添加一个，它位于另一个SVG

之上

但是，CSS属性

背景过滤器：模糊（10px）

和

-webkit背景过滤器：模糊（10px）

似乎对SVG元素没有任何影响。当我对两个

执行相同操作时，它会起作用

如何为这两个

实现相同的效果

body，html{
保证金：0；
}
.不正确{
位置：绝对位置；
左：0px；
顶部：120px；
}
.innerrect{
位置：绝对位置；
-webkit背景滤镜：模糊（10px）；
背景滤镜：模糊（10px）；
}
欧特尔迪夫先生{
位置：绝对位置；
左：0px；
顶部：120px；
宽度：200px；
高度：100px；
背景色：红色；
}
.innerdiv{
位置：绝对位置；
左：140像素；
顶部：20px；
宽度：120px；
高度：60px；
边框：1px实心；
-webkit背景滤镜：模糊（10px）；
背景滤镜：模糊（10px）；
}

---

考虑到Filter effects模块是非常实验性的，并且没有得到广泛的实施（最新的Edge和标志后面的Chrome），最好还是回到SVG 1.1过滤器。以下技术看似无害，但Firefox在背景内容的边界上仍然存在问题：

从您引用的MDN页面：

适用于：所有元素；在SVG中，它适用于不包括元素和所有图形元素的容器元素

，因此换句话说，不可能实现我想要的？或者我必须使用组并将其应用于他们？与组一起玩可能是个好主意。非常感谢。你的解决方案很有效。然而，它看起来仍然有点像一个解决办法。我希望将来会有更好的解决方案来解决这个问题。例如，我认为仍然没有办法让这些模糊的图层中的多个图层像我想象的那样叠在一起：但就目前而言，我很高兴……；）