SVG feColorMatrix не работает в сафари

Question

SVG feColorMatrix не работает в сафари

У меня есть довольно простая установка, где я хочу изменить цвет изображения SVG с помощью фильтра SVG:

<svg style="height: 0;">
  <filter id="hover" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
                   values="
                           0 0 0 0 0
                           0 0 0 0 0.68
                           0 0 0 0 0.94
                           0 0 0 1 0
                           "
                   />
  </filter>
</svg>

<img style="-webkit-filter: url('#hover'); filter: url('#hover');" 
     src="https://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg" alt="" />

Пожалуйста, обратитесь к приложенному коду для деталей.

Это работает в Firefox и Chrome, но я не могу найти проблему в сафари. Согласно caniuse, поддержка должна быть в порядке.

5

svg svg-filters colormatrix

Источник

user1602864 05 сен '16 в 14:30

1 ответ

Решение

Другие вопросы по тегам svg svg-filters colormatrix

user271353 05 сен '16 в 17:14 2016-09-05 17:14 · Accepted Answer · 2016-09-05 17:14

Итак, это будет казаться глупым - но это первоначальный разрыв строки в вашем фильтре, который отбрасывает его. Исправляя это, чтобы:

<feColorMatrix type="matrix"
               values="0 0 0 0 0
                       0 0 0 0 0.68
                       0 0 0 0 0.94
                       0 0 0 1 0
                       "
               />

... работает отлично. (Между прочим, в какой-то момент IE не мог обрабатывать разрывы строк в массиве значений в любой позиции - вы должны были поместить их все в одну строку.)