Задать вопрос
tyoma_koder
@tyoma_koder
svg

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

Не работает фильтр feDisplacementMap
https://jsfiddle.net/morskaya_ulitochka/jf03x5nc/4/
  • Вопрос задан
  • 102 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 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>
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Ведущий системный аналитик
Сбер • Москва
от 240 000 ₽
DevOps Engineer/System Administrator
Freuders
от 4 000 $
Senior PHP Программист
Автомакон
от 287 000 до 440 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Ещё заказы