【问题标题】: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>
    

    【讨论】:

    • 是的,这很有意义。删除了我的(不正确的)答案。
    猜你喜欢
    • 2011-04-14
    • 1970-01-01
    • 1970-01-01
    • 2023-03-02
    • 2018-09-24
    • 2021-11-05
    • 2018-06-21
    • 2013-01-17
    • 2017-07-15
    相关资源
    最近更新 更多