应用于 HTML 内容的 SVG 过滤器在 Safari 中表现得非常奇怪答案

【问题标题】：SVG filters applied to HTML content act very strange in Safari应用于 HTML 内容的 SVG 过滤器在 Safari 中表现得非常奇怪
【发布时间】：2019-07-03 01:11:54
【问题描述】：

我正在尝试在文本上使用 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> 生成的噪点效果

Result with Safari 12.0.2

【问题讨论】：

标签： css svg svg-filters svg-animate

【解决方案1】：

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

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

不过，您的过滤器中存在格式错误的语法。您的 feColorMatrix 中应该有一个 values 属性——而 feColorMatrix 只需要一个输入，而您有两个。

【讨论】：

非常感谢您的回复和指出语法错误。