时间戳

首页 > 解决方案 > chrome的嵌入式svg渲染问题

html - chrome的嵌入式svg渲染问题

问题描述

当我在 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，它将正常工作，否则，它在 chrome 上根本不起作用，但在 Firefox 上工作

非常感谢！<3

标签： htmlsvg

解决方案

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

您可以在浏览器兼容性部分的Mozilla 开发人员网络页面上找到该信息。由于某种原因，caniuse.com上缺少该信息。在使用它们之前检查浏览器是否实现功能总是一个好主意，但一个可悲的事实是，没有跨浏览器的 SVG 功能的严格文档。

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

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

推荐阅读