SVG alpha 过滤器改变像素颜色答案

【问题标题】：SVG alpha filter altering pixel colorSVG alpha 过滤器改变像素颜色
【发布时间】：2019-08-13 08:12:15
【问题描述】：

我正在使用 JS 和 <canvas> 来渲染等距场景。我正在使用这个 SVG 过滤器，以便瓷砖具有清晰的像素边缘：

<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="linear" slope="255"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

这会强制任何半透明像素呈现为不透明。但它也略微改变了受影响像素的颜色，因此它们与图块的其余部分明显不同。我才刚刚开始弄乱 svg 过滤器，有没有办法修改它，使其不会改变像素的颜色？

【问题讨论】：

这很有趣。是什么让您想到将 SVG 用于 3D 环境？这是来玩游戏的吗？到目前为止看起来真的很不错。
谢谢！它不是真正的 3d 环境，只是因为平铺绘制顺序而产生了这种效果。我正在使用 SVG 过滤器，以便在渲染到画布时瓷砖边缘不会得到抗锯齿，我正在寻找一种清晰、像素级的感觉。

标签： svg-filters

【解决方案1】：

一些抗锯齿方案使用源 rgb 值以外的 rgb 值（例如，字体渲染的亚像素抗锯齿与灰度抗锯齿）。在这些方案中，当您提高这些像素的不透明度时 - 您最终可能会得到不同的颜色。

在纯 SVG 中，您可以使用 shape-rendering=crispEdges 来消除抗锯齿。但是 Canvas 没有这样的选择。

这里有一个解决方案 - 您可以尝试消除它们，而不是提高抗锯齿像素的不透明度 - 因此只保留（几乎）完全不透明的像素。您可以使用不同的 feComponentTransfer 来执行此操作。下面的这个过滤器将低于 0.96 的每个不透明度设置为 0，将高于 0.96 的每个不透明度设置为 1。

<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="crush-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

【讨论】：