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 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%不透明度.