CSS背景滤镜在SVG元素上的应用

Question

CSS背景滤镜在SVG元素上的应用

5

我试图在位于另一个SVG <rect>之上的SVG <rect>中添加一个背景过滤器。然而，CSS属性backdrop-filter: blur(10px)和-webkit-backdrop-filter: blur(10px)似乎对SVG元素无效。当我在两个<div>上做同样的事情时可以生效。我该如何实现这两个<rect>的相同效果？

body, html {
  margin: 0;
}

.outerrect {
  position: absolute;
  left: 0px;
  top: 120px;
}

.innerrect {
  position: absolute;
  
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.outerdiv {
  position: absolute;
  left: 0px;
  top: 120px;
  width: 200px;
  height: 100px;
  background-color: red;
}

.innerdiv {
  position: absolute;
  left: 140px;
  top: 20px;
  width: 120px;
  height: 60px;
  border: 1px solid;
  
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

<svg>
  <rect class="outerrect" fill="red" x="0" y="0" width="200" height="100"></rect>
  <rect class="innerrect" x="140" y="20" width="120" height="60"></rect>
</svg>
<div class="outerdiv">
  <div class="innerdiv"></div>
</div>

- SimonNick

从您引用的MDN页面上可以看到：适用于所有元素；在SVG中，它适用于容器元素，但不包括<defs>元素和所有图形元素。 - Morpheus

换句话说，我想要的是不可能实现的吗？还是我必须使用组并将其应用于它们？ - SimonNick

可能尝试一下分组会是个好主意。 - Morpheus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ccprog · Accepted Answer

考虑到滤镜效果模块非常实验性，且没有广泛实施（新版Edge和Chrome需要启用标志），最好回到SVG 1.1滤镜。以下技术看起来相当无害，但仍然存在Firefox在背景内容边界处出现问题的情况：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
  <clipPath id="clip">
    <rect id="rect" x="140" y="20" width="120" height="100" />
  </clipPath>
  <filter id="blur" width="160%" height="160%" x="-30%" y="-30%">
    <!-- insert a neutral background color to prevent the backdrop showing
         through blurred regions with alpa < 1 -->
    <feFlood flood-color="#fff" result="neutral"/>
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blurred" />
    <feMerge>
      <feMergeNode in="neutral" />
      <feMergeNode in="blurred" />
    </feMerge>
  </filter>
  <!-- group everything you want to include in the backdrop -->
  <g id="backdrop">
    <rect fill="red" x="0" y="0" width="200" height="100" />
    <rect fill="yellow" x="120" y="40" width="40" height="40" />
  </g>
  <!-- make sure the clip-path is applied after the filter -->
  <g style="clip-path: url(#clip)">
    <use xlink:href="#backdrop" style="filter: url(#blur)" />
  </g>
  <use xlink:href="#rect" style="fill:none;stroke:black" />
</svg>

只要您停留在背景图像内部足够远的区域，并且没有考虑 Alpha 值，就可以使用较短的版本：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200">
  <clipPath id="clip">
    <rect id="rect" x="140" y="20" width="120" height="100" />
  </clipPath>
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blurred" />
  </filter>
  <image id="backdrop" width="400" height="200" href="https://lorempixel.com/400/200/" />
  <g style="clip-path: url(#clip);">
    <use id="overlay" xlink:href="#backdrop" style="filter: url(#blur);" />
  </g>
  <use xlink:href="#rect" style="fill:none;stroke:black" />
</svg>