google-chrome - SVG feGaussianBlur 和 feColorMatrix 滤镜在 Chrome 中不起作用？

Question

我正在尝试使用此代码 http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f 中的过滤器。所达到的效果在Win 7上的Firefox 56(64位)中很好，但在Chrome 62(64位)中却很奇怪。颜色淡得多，效果看起来不像 FF 中那么平滑。

我读过很多有关 Safari 无法正确显示这些过滤器的问题，但我找不到任何有关 Chrome 的信息。

请参阅下面的屏幕截图:

• 火狐浏览器

• Chrome

知道造成差异的原因以及如何在 Chrome 中修复它吗？

Answer 1

应用的颜色矩阵过滤器读取

<feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" />

理论上，它在数学上与以下组件传输过滤器相同:

<feComponentTransfer>
  <feFuncA type="linear" slope="19" intercept="-9" />
</feComponentTransfer>

在实践中，实现似乎会产生影响。对我来说，第二个版本在 Chrome 62 (Linux) 中给出了预期结果，而第一个版本如所描述的那样已经过时了。

遗憾的是，这两个版本均不适用于 Windows 版 Firefox 和 Safari。

Codepen

过滤器尝试创建一种“截止”值，表示:如果不透明度低于阈值，则将其设置为 0，如果高于阈值，则将其设置为 1。但实际上，这是一个小的中间区域(0.437 < 不透明度 < 0.526)，所得不透明度介于两者之间。

如果您想使用真正的离散函数，那就是这个:

<feComponentTransfer>
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>

Codepen

这似乎适用于 Windows 版 Firefox。