移动 safari 不支持 feDisplacementMap svg 过滤器吗？答案

【问题标题】：does mobile safari not support the feDisplacementMap svg-filter?移动 safari 不支持 feDisplacementMap svg 过滤器吗？
【发布时间】：2019-06-09 05:48:41
【问题描述】：

我测试了一些 feDisplacementMap svg 过滤器。它们在 macbook 上的 Safari 上很好地显示。但我 iphone 的 mobile-safari 没有显示它们。

这是一个例子。

<svg id="svgeffects">
  <defs>
    <filter class="safari_only" id="liquify">
        <feTurbulence baseFrequency="0.015" numOctaves="3" result="warp" type="fractalNoise"></feTurbulence>
        <feDisplacementMap id="liquid" in="SourceGraphic" in2="warp" scale="35" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap>
    </filter>
  </defs>
</svg>

https://codepen.io/MikeMcChillin/pen/QOJNVE

它是否无法用于移动 safari 的过滤器？或者我需要其他工作吗？

【问题讨论】：

标签： css svg mobile-safari svg-filters

【解决方案1】：

这不是 SVG 过滤器本身，而是您通过 CSS 过滤器引用它的事实。从 Mac/iOS Safari 中的 CSS 过滤器调用时，许多 SVG 过滤器原语不起作用。如果您将此过滤器直接应用于 SVG 形状，则效果很好。例如：

<svg id="svgeffects">
  <defs>
    <filter class="safari_only" id="liquify">
        <feTurbulence baseFrequency="0.015" numOctaves="3" result="warp" type="fractalNoise"></feTurbulence>
        <feDisplacementMap id="liquid" in="SourceGraphic" in2="warp" scale="35" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap>
    </filter>
  </defs>
<rect x="10" y="10" width="50" height="50" filter="url(#liquify)"/>
</svg>

【讨论】：

是的，这很有意义。删除了我的（不正确的）答案。