Question

我正在尝试在文本上使用SVG过滤器（原始示例为Tomislav Jezidžić），以模拟某种“水效应”。在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中应该有一个values属性-feColorMatrix仅接受一个输入，而您只有两个输入。

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

1 个答案: