Css Chrome中的SVG过滤器不同

我正在尝试对图像应用svg过滤器。过滤器是黄色到灰色的渐变贴图。这在Firefox和Safari上非常有效，但在Chrome中，过滤器会产生一个奇怪的结果，即颜色不同

我在这里拉了把小提琴：

过滤器的代码

<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>

---

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

feComponentTransfer是导致黄色的原因。我不确定为什么不同浏览器的效果不同？因为我的系统上的Firefox版本也是黄色的

<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>

我不确定您试图用fecomponentTransfer创建什么效果。但如果您将其放置在创建灰色屏幕的feColorMatrix之前，您将获得fecomponentTransfer的灰色输出

稍微更改feComponentTransfer的值（在变灰后），会产生一张旧的变黄黑白照片的效果。由颜色R和G产生的变黄会变高一点，而不是变蓝。RGB颜色都最大为80%的暗度，因为黑色会随着时间的推移而褪色

<img src="http://lust.nl/media/image/large/A0_madurodam60.jpg"/>

<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="0.09294117647058824 0.8"></feFuncR>
       <feFuncG type="table" tableValues="0.09294117647058824 0.8"></feFuncG>
       <feFuncB type="table" tableValues="0 0.8"></feFuncB>
       <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer>
    </filter>
</svg>

事实上，把白色的R和G一直移到1，把蓝色移到.7，这是我最喜欢的结果

<feComponentTransfer color-interpolation-filters="sRGB">
    <feFuncR type="table" tableValues=".091 1"></feFuncR>
    <feFuncG type="table" tableValues="0.09294117647058824 1"></feFuncG>
    <feFuncB type="table" tableValues="0 0.7"></feFuncB>
    <feFuncA type="table" tableValues="1 1"></feFuncA>
</feComponentTransfer></filter></svg>

只需一个从黄色到灰色的过滤器，您所需要的就是feColorMatrix

<filter id="colorMatrix">
  <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 .7 0, 0.2126 0.7152 0.0722 .6 0, 0 0 0 0 0, 0 0 0 1 0"/>
</filter>

很抱歉现在才接受您的答案。我收到通知说这是一个“热门问题”。这个问题很久以前就在Chrome中解决了，但我使用BrowserStack回到了5年前，并确认您的答案是正确的！肯定是我被接受前最长时间的记录！谢谢。

<filter id="colorMatrix">
  <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 .7 0, 0.2126 0.7152 0.0722 .6 0, 0 0 0 0 0, 0 0 0 1 0"/>
</filter>