CSS SVG 元素的背景过滤器
CSS backdrop-filter on SVG elements
我正在尝试将 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>
考虑到 Filter effects 模块是非常实验性的,并没有广泛实施(最新的 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>
我正在尝试将 backdrop filter 添加到位于另一个 SVG <rect>
.
<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>
考虑到 Filter effects 模块是非常实验性的,并没有广泛实施(最新的 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>