chrome的嵌入式svg渲染问题答案

【问题标题】：embedded svg rendering issues with chromechrome的嵌入式svg渲染问题
【发布时间】：2021-01-01 02:11:30
【问题描述】：

当我在 chrome 中的 SVG 中嵌入 SVG 时，会出现一些问题。其中一个问题是我无法在子 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，它会正常工作

非常感谢！

【问题讨论】：

这能回答你的问题吗？ Embed SVG in SVG?
这里是结果截图imgur.com/dYYhN9A
@ChrisW。我尝试了这篇文章中的解决方案，我通过 Image 元素包含了嵌套的 SVG，但问题仍然存在。它适用于 Firefox，但不适用于 chrome。感谢您的帮助！

标签： html svg

【解决方案1】：

并不是 CSS 过滤器不适用于嵌套的 SVG 元素，它们目前只能在最外层<svg> 元素上跨浏览器仅工作，并且对于 any 子元素失败元素。只有 Firefox 实现了 filter spec 的那一部分。

您可以在Mozilla developer network page 的Browser compatibility section 中找到该信息。出于某种原因，caniuse.com 上缺少该信息。在使用它们之前检查浏览器是否实现功能总是一个好主意，但一个可悲的事实是，没有跨浏览器的 SVG 功能的严格文档。

SVG drop shadow using css3 中描述了如何对 SVG 内容应用投影。但同样，请仔细检查是否支持功能。

使用嵌套的<svg>并不是一个“坏习惯”，但你应该只期望1.1 spec中定义的用法有很好的支持。

【讨论】：

非常感谢，现在一切都清楚了，非常感谢您的帮助