tyoma_koder
@tyoma_koder

Почему SVG фильтр не работает?

Не работает фильтр feDisplacementMap
https://jsfiddle.net/morskaya_ulitochka/jf03x5nc/4/
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy
Creative frontend developer
Не работает из соображений безопасности. Подробности и многолетние обсуждения со спорами по теме можно загуглить по запросу "CORS SVG".

Простых решений вашего вопроса два - или грузить картинку с того же домена, что и страница, или сконвертировать ее в base64 и вставить непосредственно в SVG:

<svg width="0" height="0" viewBox="0 0 450 300">
  <filter id="displacement-map">
    <feImage xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage>
    <feColorMatrix type="saturate" values="0" result="IMAGE"/>
    <feGaussianBlur stdDeviation=".5" in="IMAGE" result="MAP"></feGaussianBlur>
    <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap>
  </filter>
</svg>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
21 нояб. 2024, в 17:47
7000 руб./за проект
21 нояб. 2024, в 17:30
1500 руб./за проект
21 нояб. 2024, в 17:22
7000 руб./за проект