本文介绍了应用背景过滤器:blur();到SVG路径的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用SVG在CSS中重新创建效果.我们将文本另存为SVG,只需要模糊文本后面的背景即可.
I am trying to recreate an effect in CSS using an SVG. We have text saved as an SVG and needing to blur the backdrop behind the text only.
我知道通过应用 backdrop-filter:blur(10px);
的CSS样式,可以对块< div>
元素实现此操作,但是我无法使用SVG路径可获得相同的效果.
I know this is possible with block <div>
elements by applying a css style of backdrop-filter: blur(10px);
, but I am unable to get the same effect with SVG paths.
这是理想的效果
这是SVG的摘录
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1040.474px" height="209.154px" viewBox="0 0 1040.474 209.154"
enable-background="new 0 0 1040.474 209.154"
xml:space="preserve">
<g opacity="0.4">
<path fill="#FFFFFF" d="M6.336,27.021h78.367v6.485l-20.269,2.433l53.506,134.573l33.778-84.852l-20.267-49.721l-19.998-2.433
v-6.485h78.365v6.485l-21.348,2.433l53.504,134.573l47.561-129.979l-23.781-7.026v-6.485h56.478v6.485l-20.538,7.298
l-63.233,168.35h-16.213l-44.586-108.631l 43.236,108.631H98.212L27.145,35.939L6.336,33.507V27.021z"/>
</g>
</svg>
如何仅使字母后面的背景模糊?
How can you blur the backdrop behind the letters only?
推荐答案
使用 clipPath
SVG并使用 blur
过滤器剪切重复的img,将为您提供以下信息:
using clipPath
SVG and clipping a duplicate img with the blur
filter will get you something like this:
body {
margin 10px;
}
.clipped {
position: absolute;
top: 10px;
left: 10px;
clip-path: url(#svgTextPath);
filter: blur(10px);
}
<img src="https://picsum.photos/id/99/500/300">
<img class="clipped" src="https://picsum.photos/id/99/500/300">
<svg height="0" width="0">
<defs>
<clipPath id="svgTextPath">
<text x="50" y="200" textLength="400px" font-family="Vollkorn" font-size="200px" font-weight="700"> Text </text>
</clipPath>
</defs>
</svg>
这篇关于应用背景过滤器:blur();到SVG路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!