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

Question

如果我对 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 都会出现这种情况。

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

Answer 1

即使在 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>

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

SVG element pixelated on retina only if filters applied

svg

retina-display

svg-filters