Всем доброго времени суток! Решил попробовать использовать 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, примеры выше по ссылке.
Комментариев нет:
Отправить комментарий