当我将模糊滤镜应用于 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>
这是一个很好的技巧，可以使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
