仅当应用过滤器时，SVG 元素才会在视网膜上像素化

问题描述

如果我对其应用过滤器，SVG 路径元素会在视网膜屏幕上意外地像素化。没有过滤器，它看起来很漂亮和光滑。

我正在使用高斯模糊和颜色矩阵：

<filter id="svg-filter-rounded-corners" x="-50%" y="-50%" width="200%" height="200%">
  <feGaussianBlur stdDeviation="3" />
  <feColorMatrix mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 50 -25" />
</filter>

这是一个可重现的示例。左边的圆圈有滤镜，右边的圆圈没有。

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
  <defs>
    <filter id="filter" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="3" />
      <feColorMatrix mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 50 -25" />
    </filter>
  </defs>
  <circle filter="url(#filter)" cx="100" cy="100" r="90" fill="none" stroke="#221C35" stroke-width="10" />
  <circle cx="300" cy="100" r="90" fill="none" stroke="#221C35" stroke-width="10" />
</svg>

这在 MacOS 上的 Chrome 和 Firefox 中都会发生。

即使应用了过滤器，我能做些什么来保持路径平滑吗？

解决方法

即使在 Chrome/Windows 上也很脆。问题是您用于 feColorMatrix 的值太大。它完全消除了抗锯齿。试试：

<feColorMatrix mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 -4" />

这给出了更合理的结果。如果您不喜欢该结果，您可以尝试使用 feComponentTransfer 而不是 feColorMatrix 对不透明度进行更详细的操作。

<feComponentTransfer>
 <feFuncA type="table" tableValues = "0 0 0 0 0.5 1 1 1 1 1 1 1 1 1 1 1"/>
</feComponentTransfer>

retina-display svg svg svg svg-filters