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％不透明度。