Фильтры SVG в Safari: x, y, ширина, высота не применяются

Проблема:

  • В Safari отображаются оба фильтра, но оба имеют полную ширину/высоту прямоугольника, поэтому виден только верхний.

Как заставить это работать последовательно в разных браузерах?

Демонстрация ошибки здесь: https://codepen.io/mknepprath/pen/mKeObo. Откройте в Chrome или Firefox, чтобы увидеть, как это должно выглядеть. Спасибо!

HTML:

<svg class='a'>
  <defs>
    <filter id='hey'>
      <feColorMatrix
        type='matrix'
        result='darken'
        values='.2 .05  .05 0 .35
                .05 .2  .05 0 .35
                .05 .05 .2  0 .35
                0   0    0  1 0'
      />
      <feColorMatrix
        in='SourceGraphic'
        result='node'
        x='5'
        y='5'
        width='90'
        height='90'
      />
      <feMerge>
        <feMergeNode in='darken' />
        <feMergeNode in='node' />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>

CSS:

.a {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}

Chrome и Firefox: предварительный просмотр Chrome Safari: предварительный просмотр ошибки сафари


person Michael Knepprath    schedule 06.06.2018    source источник


Ответы (1)


Многие функции фильтров не работают в Safari, когда вы применяете фильтр SVG к содержимому HTML с помощью лазейки фильтра CSS. Похоже, вы нашли еще один такой случай. Если вы хотите продолжать делать это с фильтрами, делайте это полностью в SVG.

person Michael Mullany    schedule 07.06.2018
comment
Спасибо! Это тот случай - я переключился на применение его к SVG, и он отлично работает. ???? - person Michael Knepprath; 07.06.2018