css - Chrome 中的 SVG 过滤器有所不同

Question

我正在尝试将 svg 滤镜应用于图像。滤镜是黄色到灰色的渐变图。这在 Firefox 和 Safari 上效果很好，但在 Chrome 中，过滤器会产生奇怪的结果，颜色不同。

我在这里做了一个 fiddle :http://jsfiddle.net/thomasjonas/a3pu9uo9/2/

过滤器代码

<svg version="1.1" width="0" height="0"><filter id="filter"><feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0.8"></feFuncR><feFuncG type="table" tableValues="0.9294117647058824 0.8"></feFuncG><feFuncB type="table" tableValues="0 0.8"></feFuncB><feFuncA type="table" tableValues="1 1"></feFuncA></feComponentTransfer></filter></svg>

CSS

img {
    -webkit-filter: url(#filter);
    filter: url(#filter);
}

Answer 1

将“color-interpolation-filters='sRGB'”移动到您的过滤器元素中，您将获得一致的结果。Firefox/Safari 或 Chrome 似乎在整个过滤器中使用 sRGB(尽管它只是被声明)对于 feComponentTransfer)。我不知道哪一个做错了。