在Safari适用于HTML内容的行为非常奇怪的SVG过滤器

Question

我想在文本中使用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浏览器，火狐：文本正确动画 Safari浏览器：文本被冻结，并在某些情况下，噪音产生的效果与<feTurbulence>出现

Result with Safari 12.0.2

Answer 1

Safari一直使用非SVG内容SVG滤镜支持较弱。真正起作用的唯一的东西是他们不得不实施，支持包装CSS滤镜什么（模糊（），反转（）等）

如果你想实现这一点使用SVG text元素，这会工作得很好。

不过，你有你的过滤器语法错误。你应该有一个值在feColorMatrix属性 - 和feColorMatrix只需一个输入和你有两个。