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

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

0 голосов
/ 08 февраля 2019

Я пытаюсь использовать 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

1 Ответ

0 голосов
/ 09 февраля 2019

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

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

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

...