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

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

Не работает фильтр feDisplacementMap
https://jsfiddle.net/morskaya_ulitochka/jf03x5nc/4/
  • Вопрос задан
  • 99 просмотров
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 комментариев
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Консультант 1С (стажер) по направлению
Пять с плюсом • Смоленск
от 40 000 ₽
Php-developer / full stack developer
Aporia • Севастополь
от 100 000 до 120 000 ₽
Менеджер по персоналу / Рекрутер
.White Code • Санкт-Петербург
от 55 000 до 85 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обучение моделированию процесса дуговой наплавки в CAE
25 апр. 2024, в 18:14
1500 руб./в час
Реализовать форму регистрации и авторизации на React
25 апр. 2024, в 18:13
1000 руб./за проект
Настроить и запустить email кампанию на Gmail
25 апр. 2024, в 17:54
30000 руб./за проект
Ещё заказы