Страницы

Поиск по вопросам

вторник, 16 октября 2018 г.

Задать заливку svg в css

Всем доброго времени суток! Решил попробовать использовать svg-файлы в верстке, но столкнулся с проблемой - не задается цвет заливки. Пытаюсь прописать через fill, но тщетно. Вот код css
.icon { background: url("img/icons/book.svg"); background-size: 15px 16px; width: 15px; height: 16px; fill: #ffb600; }
вот svg

в итоге иконка заливается черным, хотя по идее должна быть желтой. Прошу помощи опытных. Спасибо!


Ответ

Вот обсуждение этой проблемы на английском: https://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image
Фактически, ответ такой: background-image не является частью DOM, поэтому манипулировать им нельзя. Поэтому путей решения два:
Не ставить svg на фон, а просто включить в документ: http://jsfiddle.net/pn640zLt/

...

Или же манипулировать содержимым собственно SVG на лету с помощью JS, примеры выше по ссылке.

Комментариев нет:

Отправить комментарий