Фильтры SVG, примененные к содержимому HTML, ведут себя очень странно в Safari

Я пытаюсь использовать фильтры SVG (исходный пример Tomislav Jezidžić) для текста, чтобы имитировать своего рода «водный эффект». Результат нормальный в Chrome и Firefox, но Safari ведет себя странно.

Я пытался разбить код и выяснить, какая часть кода неверна, но безуспешно. Safari 12+ корректно поддерживает SVG-фильтры: https://caniuse.com/#feat=svg-filters

Codepen

* {
  margin: 0;
  padding: 0;
}

.main {
  font-family: sans-serif;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  display: flex;
  filter: blur(2px);
  flex-direction: column;
  width: 100%;
  filter: url('#water');
}


.main-text {
  letter-spacing: 0.04em;
  height: 50vh;
  font-size: 48px;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>   
    <filter id="water">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="1" result="turbolence"/>
      <feColorMatrix in="turbolence" in2="SourceGraphic" type="hueRotate">
        <animate attributeType="XML" attributeName="values" values="0;110;150;210;360" dur="4s" repeatCount="indefinite"/>
      </feColorMatrix>
      <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="30" />
    </filter>
  </defs>
</svg>


<main class="main">
  <div class="main-text">
    Help me,<br>
    please
  </div>
</main>

Chrome, Firefox: текст анимирован правильно
Safari: текст заморожен, а в некоторых случаях появляется эффект шума, созданный с помощью <feTurbulence>

Результат с Safari 12.0.2


svg css svg-animate svg-filters
person Marco Mezzavilla    schedule 08.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Safari плохо поддерживает использование фильтров SVG для контента, отличного от SVG. Единственное, что действительно работает, — это то, что они должны были реализовать для поддержки пакетных фильтров CSS (blur(), invert() и т. д.).

Если вы хотите реализовать это с помощью элементов SVG text, это будет работать нормально.

Тем не менее, у вас искаженный синтаксис в ваших фильтрах. У вас должен быть атрибут values ​​в вашем feColorMatrix, а feColorMatrix принимает только один вход, а у вас их два.

person Michael Mullany    schedule 09.02.2019
comment
Большое спасибо за ответ и за указание на синтаксическую ошибку. - person Marco Mezzavilla; 09.02.2019