应用于 HTML 内容的 SVG 过滤器在 Safari 中表现得很奇怪

Question

我正在尝试在文本上使用 SVG 过滤器（Tomislav Jezidžić 的原始示例）以模拟某种 "water effect"。结果在 Chrome 和 Firefox 中正常，但 Safari 表现异常。

我试图分解代码并找出代码的哪一部分是错误的，但没有成功。 Safari 12+ 正确支持 SVG 过滤器：https://caniuse.com/#feat=svg-filters

* {
  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> 产生的噪音效果出现

Result with Safari 12.0.2

Answer 1

Safari 对在非 SVG 内容上使用 SVG 过滤器的支持很差。唯一真正有效的是他们必须实施以支持打包的 CSS 过滤器（blur()、invert() 等）

如果您想使用 SVG text 元素来实现它，这会很好。

但是，您的过滤器中的语法格式不正确。您的 feColorMatrix 中应该有一个值属性 - feColorMatrix 只接受一个输入，而您有两个。

应用于 HTML 内容的 SVG 过滤器在 Safari 中表现得很奇怪

SVG filters applied to HTML content act very strange in Safari

css

svg

svg-animate

svg-filters