当我将SVG嵌入chrome的SVG中时，会发生一些问题。这些问题之一是我无法在子SVG上应用“ filter：drop-shadow”，尽管在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功能的严格文档。
使用css3的SVG阴影中描述了如何将阴影应用于SVG内容。但是，再次仔细检查功能的支持。
嵌套的使用<svg>不是一个“坏习惯”，但是您只能期望1.1规范中定义的用法具有良好的支持。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句