应用背景滤镜：blur(); 到 SVG 路径

Question

我正在尝试使用 SVG 在 CSS 中重新创建效果。我们将文本保存为 SVG，只需要模糊文本后面的背景。

<div>我知道通过应用 css 样式可以使用块元素backdrop-filter: blur(10px);，但我无法使用 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>

如何仅模糊字母后面的背景？

Answer 1

使用clipPathSVG 并使用过滤器剪切重复的 imgblur将会得到如下所示的结果：

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>