来自灰度的离散值 (0/1)

Discrete values (0/1) from grayscale

我为 Snap 创建了一个滤镜插件,旨在 return 离散值 1 用于像素值 (>=0.5,>=0.5,>=0.5) 和 0 值 (<0.5 ,<0.5,<0.5)

为了帮助调试,我使用了从白到黑的线性渐变。

在这个渐变中,最左边的像素是 (1,1,1),最右边的像素是 (0,0,0),中间的像素是 (0.5,0.5,0.5)

因此,我希望应用的插件在中间剖析渐变,留下一半完全白色,一半完全黑色,但我的输出 returns 是错误的值,如图所示以下:

如您所见,大约三分之一的渐变是白色,三分之二是黑色,而不是黑白比例相等。

这是我的代码:

Snap.filter.discrete()

Snap.filter.discrete = function () {
    var str = "0 1"
    return Snap.format('<feComponentTransfer>' +
    '<feFuncR type="discrete" tableValues="' + str + '"/>' +
    '<feFuncG type="discrete" tableValues="' + str + '"/>' +
    '<feFuncB type="discrete" tableValues="' + str + '"/>' +
    '</feComponentTransfer>');
};

我哪里错了?

Fiddle: https://jsfiddle.net/z7a49npn/1/

这是由于 SVG 中用于渐变和滤镜的默认颜色空间不匹配造成的:分别是 sRGB 和 linearRGB。如果您添加

color-interpolation-filters="sRGB"

到你的过滤器元素 - 一切都应该工作。