当我在chrome中的SVG中嵌入SVG时，会出现一些问题。其中一个问题是我不能申请"；filter：放置阴影"；在子SVG上，尽管这在Firefox上运行良好。当我将它应用于父SVG时，它可以在chrome上工作。
在SVG中嵌入SVG是一个坏习惯，还是我的代码有问题？
body {
background: linear-gradient(
rgb(155, 246, 255, 0.7),
rgba(189, 178, 255, 0.9)
);
background-attachment: fixed;
}
.test1:hover {
cursor: pointer;
filter: drop-shadow(-3px 1px 24px rgba(40, 245, 4, 1));
-webkit-filter: drop-shadow(-3px 1px 24px rgba(40, 245, 4, 1));
-moz-filter: drop-shadow(-3px 1px 24px rgba(40, 245, 4, 1));
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<svg height="200" viewBox="0 0 50 50">
<g>
<svg
class="test1"
height="200"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
>
<rect class="7-1" x="0" y="0" height="100" width="100" />
</svg>
</g>
</svg>
</div>
</body>
</html>在这个代码中，如果我应用类"；test1"；对于父SVG，它将正常工作و，否则，它在chrome上根本不工作，但在Firefox 上工作
非常感谢<3
这并不是说CSS过滤器不适用于嵌套的SVG元素，它们目前只适用于最外层的<svg>元素上的跨浏览器，对于任何子元素都会失败。只有Firefox实现了过滤器规范的这一部分。
您可以在Mozilla开发者网络页面的浏览器兼容性部分找到该信息。出于某种原因，caniuse.com上缺少这些信息。在使用之前检查浏览器是否实现了功能总是一个好主意，但令人遗憾的是，没有严格的跨浏览器SVG功能文档。
如何将放置阴影应用于SVG内容在SVG放置阴影中使用css3进行了描述。但是，请再次仔细检查功能的支持。
使用嵌套CCD_；坏习惯"；，但是您应该只期望1.1规范中定义的用法具有良好的支持。