SVG Filter: разные цвета в зависимости от браузера - PullRequest
Новая
       17

SVG Filter: разные цвета в зависимости от браузера

0 голосов
/ 07 мая 2019

У меня есть черно-белое изображение, которое я пытаюсь перекрасить с помощью фильтра 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?

1 Ответ

2 голосов
/ 08 мая 2019

Это будет казаться глупым - но переместите color-interpolation-filters="sRGB" в элемент фильтра вместо feComponentTransfer - Safari, кажется, не проверяет его, когда он помещается в примитив.

Вот фильтр, который работает для меня. Я использую Chrome 73 и Safari 12.1 на MacOS Mojave на более старом Macbook Pro (2016). 

<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 справа.

enter image description here

...