Задать вопрос
HelpSophie
@HelpSophie
css

Как задать переменную для fill в инлайн svg bg image или conent? Или можно ли приспособить current-color?

Есть 
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 23 23'%3E%3Cpath fill='%23686868' d='M20 2c.542 0 1 .458 1 1v17c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h17m0-2H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z'/%3E%3C/svg%3E");

или тоже самое в content, без разницы.
для content
content:  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 23 23'%3E%3Cpath fill='%23686868' d='M20 2c.542 0 1 .458 1 1v17c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h17m0-2H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z'/%3E%3C/svg%3E");



Как заменить цвет в fill на цвет из переменной @bright в less.
Или на css переменную.
Пробовала закрывать кавычки, писать переменную и снова их открывать, по аналогии с js, но не заработало.

Или может быть можно как-то использовать current-color? Это было бы даже еще лучше, чем переменную.
  • Вопрос задан
  • 645 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Решения вопроса 1
RAX7
@RAX7
Это не инлайн svg, инлайн это когда прямо в html вставляют <svg>..... </svg>
В less переменную можно вставить как {@bright} lesscss.org/features/#variables-feature
https://codepen.io/anon/pen/MLYLgB?editors=0110
Ответ написан
14 комментариев
14 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Поднять собственный сервер на Матриксе
16 апр. 2024, в 20:08
1000 руб./в час
Сверстать 2 транзакционных письма по макету figma
16 апр. 2024, в 20:05
3000 руб./за проект
Автоматизировать работу ноумен с Инстаграмом
16 апр. 2024, в 19:33
1000 руб./за проект
Ещё заказы