css 将backdrop-filter：blur();应用于SVG路径

ibps3vxo 于 2023-11-19 发布在其他

关注(0)|答案(2)|浏览(103)

我试图重新创建一个效果在CSS中使用SVG。我们有文本保存为SVG和需要模糊的背景背后的文字只。
我知道通过应用backdrop-filter: blur(10px);的css风格，可以对块<div>元素实现这一点，但我无法对SVG路径获得相同的效果。
这是期望的效果

下面是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>

字符串
你怎么能只模糊字母后面的背景呢？

css

来源：https://stackoverflow.com/questions/60141217/applying-a-backdrop-filter-blur-to-an-svg-path

2条答案

按热度按时间

lb3vh1jj1#

使用clipPath SVG并使用blur过滤器剪切重复的img将得到如下内容：

body {
  margin 10px;
}

.clipped {
  position: absolute;
  top: 10px;
  left: 10px;
  clip-path: url(#svgTextPath);
  filter: blur(10px);
}

个字符

赞(0）回复(0）举报 2023-11-19

pxq42qpu2#

替代/更新的解决方案基于@matan-sanbira的解决方案，使用backdrop-filter而不是重复的图像：

body {
  margin 10px;
}

.relative {
  position: relative;
}

.clipped {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  clip-path: url(#svgTextPath);
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
}

个字符

赞(0）回复(0）举报 2023-11-19

我来回答

css 将backdrop-filter：blur();应用于SVG路径

2条答案

相关问题

热门标签

最新问答