SVG 模糊滤镜边缘伪影答案

【问题标题】：SVG blur filter edge artifactsSVG 模糊滤镜边缘伪影
【发布时间】：2014-08-16 11:34:44
【问题描述】：

当我对 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>

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

这是一个很好的 hack，它使用 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% 不透明度。

另一个变体是使用一个 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>

【讨论】：

它似乎不起作用。见这里：jsbin.com/vugojiju/1/edit 我把同一张图片放在后面来说明问题 - 模糊图像的透明边缘。
您必须在添加组件传输之前关闭 feGaussianBlur 标签。在我的代码中，我使用了自关闭在您的版本中，您将 componenttransfer 包含在一组打开和关闭 feGaussian 标记中。所以，它忽略了 componentTransfer
有一个错字：在第一行，x="0% 应该有一个结束双引号。除此之外，很棒的 hack！