Question

我正在尝试将backdrop filter添加到位于另一个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>

Answer 1

考虑到滤镜效果模块非常具有实验性而且没有广泛实现（最新的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>

SVG元素上的CSS背景过滤器

1 个答案: