мобильное сафари не поддерживает svg-фильтр feDisplacementMap? - PullRequest
Новая
       27

мобильное сафари не поддерживает svg-фильтр feDisplacementMap?

0 голосов
/ 15 января 2019

Я протестировал некоторые svg-фильтры feDisplacementMap.они хорошо отображаются в Safari на MacBook.но мобильное сафари моего 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

Это непригодный фильтр для мобильныхсафари?или мне нужна другая работа?

1 Ответ

0 голосов
/ 15 января 2019

Это не сам фильтр SVG, а тот факт, что вы ссылаетесь на него через фильтр CSS. Некоторые примитивы фильтра SVG не работают при вызове из CSS-фильтра в Mac / iOS Safari. Если вы примените этот фильтр непосредственно к фигуре 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>
...