Html chrome的嵌入式svg渲染问题

当我在chrome的SVG中嵌入SVG时，会出现一些问题。其中一个问题是，我无法在子SVG上应用“过滤器：阴影”，尽管这在Firefox上可以很好地工作。当我在父SVG上应用它时，它在chrome上工作

在SVG中嵌入SVG是一个坏习惯，还是我的代码有问题

正文{
背景：线性梯度(
rgb（155246255,0.7），
rgba（189178255,0.9）
);
背景附件：固定；
}
.test1：悬停{
光标：指针；
滤镜：阴影（-3px1px24pxRGBA（40245,4,1））；
-webkit过滤器：阴影（-3px 1px 24px rgba（40245,4,1））；
-moz过滤器：阴影（-3px1px24pxRGBA（40245,4,1））；
}

文件

这并不是说CSS过滤器不能在嵌套的SVG元素上工作，它们目前只能在最外层的

元素上跨浏览器工作，而不能在任何子元素上工作。只有Firefox实现了这一部分

您可以在中找到有关的信息。由于某种原因，上的信息缺失。在使用之前检查浏览器是否实现了功能总是一个好主意，但令人遗憾的是，没有跨浏览器的SVG功能的严格文档

中介绍了如何将阴影应用于SVG内容。但同样，请仔细检查功能的支持情况

---

使用嵌套的

并不是一个“坏习惯”，但您应该只期望中定义的用法得到良好的支持。

这是否回答了您的问题？以下是@ChrisW结果的屏幕截图。我在这篇文章中尝试了解决方案，我通过图像元素包含了嵌套的SVG，但问题仍然存在。它可以在Firefox上运行，但不能在chrome上运行。谢谢你的帮助！非常感谢你，现在一切都清楚了，我真的很感谢你的帮助