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

Question

[HelpSophie]

Есть

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? Это было бы даже еще лучше, чем переменную.

Comments

[yarovikov]

Это не инлайн

Answer 1

[RAX7]

Это не инлайн svg, инлайн это когда прямо в html вставляют <svg>..... </svg>
В less переменную можно вставить как {@bright} lesscss.org/features/#variables-feature
https://codepen.io/anon/pen/MLYLgB?editors=0110

Comments

[HelpSophie]

А инлайн в CSS, это не инлайн? А как?

Скобочки попробую через пару часиков.

[RAX7]

HelpSophie, это вставка через data url, туда можно не только svg завернуть.
https://css-tricks.com/data-uris/

[HelpSophie]

RAX7, хорошо, я чтобы отличить от base64, написала, что в bg вставляется напрямую svg, без кодирования.

@{bright}

да, так работает, спасибо!

[HelpSophie]

RAX7, тьфу вся эта конструкция не работает в ФФ

[RAX7]

HelpSophie, less конвертирует rgb(255, 0, 0) в #ff0000, а firefox ломается если в внутри data url есть символ #.
Можно попробовать записать цвет как rgba(255, 0, 0); или найти другой способ чтобы less не конвертировал запись цветов.
https://codepen.io/anon/pen/bzdxOw?editors=0110

[HelpSophie]

RAX7,
Спасибо за участие :)

Вот так победила

@bright-svg: rgba(red(@bright), green(@bright), blue(@bright), 0.99);

и в SVG @{bright-svg}

Идея с 0.99 мне не очень нравится. Но лучше пока не вижу.
Если ставить 1, то на выходе less делает hex формат.

[RAX7]

HelpSophie, можно просто

@bright-svg: rgba(red(@bright), green(@bright), blue(@bright));

без 0.99, хотя это тоже костыльное решение.

[HelpSophie]

RAX7, да, так лучше

а не подскажете, вот такую конструкцию как-то можно преобразовать, чтобы работала?

fill='rgba(red(@{bright}), green(@{bright}), blue(@{bright}))'

Надо куда-то еще скобочек навертеть?

[RAX7]

HelpSophie, честно не знаю ¯\_(ツ)_/¯

[HelpSophie]

RAX7, Большое спасибо за помощь!

[RAX7]

HelpSophie, пожалуйста:)

[HelpSophie]

RAX7, делюсь еще вариантом.
Свойство тоже может быть переменной.
задаем

fill: rgba(red(@bright), green(@bright), blue(@bright));

и дальше используем как переменную background: $fill;
Для SVG нужно тоже добавить {}

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='${fill}' 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");

Но не работает в ИЕ. Предыдущий способ, в прочем, тоже )))

[RAX7]

HelpSophie, можно еще в цвете заменять "#" на "%23", чтобы фф не ломался
https://codepen.io/anon/pen/LqpwyQ
Вариантов можно еще напридумывать.

[HelpSophie]

RAX7, Люблю много вариантов )))
Спасибо