SVG feGaussianBlur 产生明显的条纹和边缘答案

【问题标题】：SVG feGaussianBlur producing noticeable banding & edgesSVG feGaussianBlur 产生明显的条纹和边缘
【发布时间】：2021-02-05 04:50:17
【问题描述】：

我正在使用 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>

See rendered result

【问题讨论】：

我应该在这里看到什么？
好吧，this 可能更具说明性。它只向我显示步进输出，根本不像模糊的圆圈。

标签： svg svg-filters gaussianblur

【解决方案1】：

您看到的条带（可能仅在 Windows 上）是由于 Windows 图形 API 在颜色空间为线性 RGB 时对较大模糊的抖动进行了糟糕的工作。如果你添加

color-interpolation-filters="sRGB" 到您的滤镜元素，您将获得平滑的模糊效果。

【讨论】：