SVG模糊滤波边缘伪影

Question

当我将模糊过滤器应用于svg图像时，它会模糊边缘，因此它们变得不透明(见左示例)。我想要的是模糊它没有这样的人造物(见正确的样本)。我通过黑客解决了这个问题:复制相同的翻转图像，并将它们放置在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元素中的过滤器大小属性)--如果不这样做，您将看到新的不透明的模糊和黑色背景溢出到原始图像之外。

<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通道的图像--它将将所有内容转换为100%的不透明度。

另一个变体是使用feColorMatrix来做同样的事情，一些浏览器似乎让GPU加速了这个操作，所以它可能比feComponentTransfer更快。

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