svg - SVG过滤器：不同的颜色取决于浏览器

Question

我有一张黑白图像，我正在尝试使用 SVG 过滤器重新着色。Safari 中的颜色看起来比 Chrome 中的颜色要深得多，有什么方法可以让 Safari 看起来与 Chrome 更一致？

CSS代码如下

.container-teamMembers a.six img {
    -webkit-filter: url(#duotone_bright_green);
    -moz-filter: url(#duotone_bright_green);
    -o-filter: url(#duotone_bright_green);
    -ms-filter: url(#duotone_bright_green);
    filter: url(#duotone_bright_green);
}

SVG过滤器是

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
<filter id="duotone_bright_green">
    <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0"></feColorMatrix>
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone_blue_black">
<feFuncR type="table" tableValues="0.03137254902 0.74509803921"></feFuncR>
<feFuncG type="table" tableValues="0.007843137255 0.81568627451"></feFuncG>
<feFuncB type="table" tableValues="0.02352941176 0.0431372549"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer> 
</filter>
</svg>

谁能告诉我如何让 Safari 看起来更轻/与 Chrome 更一致？

标签： svgsvg-filters

Answer 1

这看起来很愚蠢 - 但是将其color-interpolation-filters="sRGB"移入过滤器元素而不是 feComponentTransfer - Safari 在将其放入原语时似乎不会检查它。

这是适合我的过滤器。我在较旧的 Macbook Pro（2016 年）上的 MacOS Mojave 上运行 Chrome 73 和 Safari 12.1。

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
<filter id="duotone_bright_green" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0"></feColorMatrix>
<feComponentTransfer  result="duotone_blue_black">
<feFuncR type="table" tableValues="0.03137254902 0.74509803921"></feFuncR>
<feFuncG type="table" tableValues="0.007843137255 0.81568627451"></feFuncG>
<feFuncB type="table" tableValues="0.02352941176 0.0431372549"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer> 
</filter>
</svg>

这是屏幕截图——左边是 Chrome，右边是 Safari。