如何解决为什么SVG feGaussianBlur产生脏结果
我正在使用SVG进行一些生成艺术。我注意到一件事,SVG feGaussianBlur
过滤器针对最接近的颜色产生难看的结果。例如:
<svg viewBox="0 0 512 512" width="512" height="512">
<defs>
<filter id="blur-1" filterUnits="userSpaceOnUse">
<feGaussianBlur edgeMode="none" in="SourceGraphic" stdDeviation="40" />
</filter>
</defs>
<rect x="0" y="0" width="512" height="512" fill="#333" />
<circle cx="256" cy="256" r="128" fill="#444" filter="url(#blur-1)" />
</svg>
在模糊区域的边缘产生奇怪的结果。寻找一种解决方法。
<svg viewBox="0 0 512 512" width="512" height="512">
<defs>
<filter id="blur-1" filterUnits="userSpaceOnUse">
<feGaussianBlur edgeMode="none" in="SourceGraphic" stdDeviation="40" />
</filter>
</defs>
<rect x="0" y="0" width="512" height="512" fill="#111" />
<circle cx="256" cy="256" r="128" fill="#222" filter="url(#blur-1)" />
</svg>
解决方法
您看到的条带(可能仅在 Windows 上)是由于 Windows 图形 API 在颜色空间为 linearRGB 时为更大的模糊做了糟糕的抖动工作。如果添加
color-interpolation-filters="sRGB"
到您的过滤器元素,您将获得平滑的模糊效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。