我有一个黑白图像,试图用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?
答案 0 :(得分:2)
这似乎很愚蠢-但将color-interpolation-filters="sRGB"
移到filter元素而不是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。