SVG 模糊滤镜边缘伪影

Question

当我将模糊滤镜应用于 svg 图像时，它会模糊边缘，使它们变得不透明(见左图)。我想要的是在没有这种工件的情况下模糊它(见右示例)。
我通过 hack 解决了这个问题:只需复制相同的翻转图像并将它们放置在 4 个边上。

有没有更好的办法？

请注意，我不能仅将图像放大 5-10%；大小应与原始图像相同。

这是我的 svg:

...
<filter id="blur">
 <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
...
<g filter="url(#blur)">
  <image xlink:href="cathedral.jpg"></image>
</g>

Answer 1

这是一个使用 feComponentTransfer 将边缘的不透明度增加到 1.0 的清晰边框的好方法，但它也需要您将过滤器裁剪为过滤元素的大小(使用过滤器元素中的过滤器大小属性) - 如果你不这样做，你会看到新的不透明模糊和黑色背景溢出原始图像之外。

<filter id="blur" x="0%"
 y="0%" width="100%" height="100%">
 <feGaussianBlur in="SourceGraphic" stdDeviation="4"/>
  <feComponentTransfer>
      <feFuncA type="discrete" tableValues="1 1"/>
   </feComponentTransfer>
</filter>
...
<g filter="url(#blur)">
  <image xlink:href="cathedral.jpg"></image>
</g>

如果您没有方形输入(假设您的照片是圆形的)，那么您需要使用 feComposite "in"将输出裁剪到输入区域，而不是使用过滤器尺寸。但是 feComposites 现在有点慢，还不能用作 CSS 过滤器的一部分，因此上述方法更适合方形输入。

请注意，这不适用于具有可变不透明度/Alpha channel 的图像 - 它会将所有内容转换为 100% 不透明度。