Question

我测试了一些feDisplacementMap svg过滤器。它们可以在Macbook的Safari上很好地显示。但是我的iPhone的移动浏览器无法显示它们。

这是例子之一。

<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

它是否无法用于移动设备浏览器？还是我需要其他工作？

Answer 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>

Safari浏览器不支持feDisplacementMap svg过滤器吗？

1 个答案: