SVG模糊滤镜边缘伪影问题

Question

SVG模糊滤镜边缘伪影问题

svgsvg-filters

5

当我对SVG图像应用模糊滤镜时，它会使边缘变得稍微透明（请参见左侧示例）。我想要的是在不产生这种伪影的情况下进行模糊处理（请参见右侧示例）。

我通过一种方法解决了这个问题：只需复制相同的翻转图像并将它们放置在四个方向上。

是否有更好的方法？

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

以下是我的SVG代码：

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

enter image description here

- Plastic Rabbit

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Mullany · Accepted Answer

这是一个不错的技巧，用feComponentTransfer增加边缘的不透明度来产生清晰的边框，但它也要求你将过滤器剪裁到过滤元素的大小（使用过滤元素中的过滤器大小属性） - 如果你不这样做，你会看到新的不透明模糊和黑色背景溢出原始图像。

<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>