SVG feGaussianBlur和feColorMatrix过滤器在Chrome中不起作用? [英] SVG feGaussianBlur and feColorMatrix filters not working in Chrome?

问题描述

我正在尝试使用此代码中的过滤器 http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f .在Win 7上的Firefox 56(64位)中，该效果很好，但在Chrome 62(64位)中却很奇怪.颜色要浅得多，效果看起来不如FF.

I'm attempting to use the filters from this code http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f . The achieved effect is good in Firefox 56 (64bits) on Win 7, but it is strange in Chrome 62 (64bits). The colors are much lighter and the effect doesn't look as smooth as in FF.

我已经阅读了很多有关Safari无法正确显示这些过滤器的问题，但是我找不到关于Chrome的任何信息.

I've read a lot of questions about Safari not displaying these filters correctly, but I can't find anything about Chrome.

请查看下面的屏幕截图:

Please see screenshots below :

• Firefox

• Chrome

有什么主意是造成差异的原因以及如何在Chrome中修复该差异?

Any idea what is causing the difference and how to fix it in Chrome ?

推荐答案

应用的颜色矩阵滤镜读取

The Color Matrix filter applied reads

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

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

It is - in theory - mathematically identical to the following Component Transfer filter:

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

在实践中，实现似乎有所不同.对我来说，第二个版本在Chrome 62(Linux)中提供了预期的结果，而第一个版本则如所述被淘汰了.

In practice, implementations seem to make a difference. For me, the second version gives the intended result in Chrome 62 (Linux), while the first version is washed-out as described.

不幸的是，这两个版本均不适用于Windows和Safari的Firefox.

Unfortunately both versions do not work with Firefox for Windows and Safari.

Codepen

过滤器尝试创建一种截止"值，该值表示:如果不透明度低于阈值，则将其设置为0，如果高于，则将其设置为1.但是实际上，它是一个较小的中间区域(0.437<不透明度< 0.526)，其中不透明度介于中间.

The filter tries to create a sort of "cutoff" value that says: if opacity is below a theshold value, set it to 0, if it is above, set it to 1. But in fact the is a small intermediate region (0.437 < opacity < 0.526) where the resulting opacity is inbetween.

如果您要使用真正的离散函数，那就应该是这样:

If you want to work with a truely discrete function, it would be this one:

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

Codepen

这似乎可以在Windows的Firefox中使用.

And this seems to work in Firefox for Windows.

这篇关于SVG feGaussianBlur和feColorMatrix过滤器在Chrome中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！