Переменная SCSS в фоновом изображении с URI данных изображения SVG

В следующем SCSS я хотел бы использовать переменную fg-color в атрибуте url background-image.

$fg-color: #ff6464;

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff6464'/></svg>");
}

На данный момент значение переменной просто повторяется в строке SVG, например:

fill='%23ff6464'

Я хотел бы, чтобы это автоматически обновлялось всякий раз, когда обновляется переменная fg-color.

Как я могу это сделать?

ОБНОВИТЬ:

Этот вход SCSS:

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

Выводит этот CSS:

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

... точно так же - переменная не обрабатывается.

ПРИМЕЧАНИЕ:

Я рассмотрел эти вопросы, которые кажутся похожими, но не одинаковыми:


svg css sass data-uri
person bguiz    schedule 25.08.2014    source источник
comment
@cimmanon Я проигнорирую язвительность твоего комментария. В любом случае, да, я пытался использовать переменную, и результат, который я получаю, вообще не выполняет никакой замены. Я обновлю свой вопрос, чтобы показать, что именно я получаю.   -  person bguiz    schedule 25.08.2014
comment
@cimmanon Я нашел способ сделать это. Оказывается, это было сложнее, чем просто использовать переменную.   -  person bguiz    schedule 25.08.2014

Ответы (3)


arrow_upward
31
arrow_downward

Сначала создайте функцию SASS. Это (ab) использует интерполяцию строк для преобразования цвета в строку, а затем удаляет первый символ (всегда должен быть «#») и помещает «%23» на его место (кодированная URL-форма «#»).

@function url-friendly-colour($colour) {
    @return '%23' + str-slice('#{$colour}', 2, -1)
}

Затем используйте функцию, но для того, чтобы она работала внутри строки, она должна интерполироваться, используя #{}

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>");
}

Недостаток этого подхода, конечно, в том, что он не будет работать с цветами, которые указаны по имени цвета вместо их шестнадцатеричного цвета.

Например. #f00 работает, а red нет.

person bguiz    schedule 25.08.2014
comment
Это интересный подход, какой браузер вы использовали? Для меня просто использование fill="#{$color}" работает отлично. - person Jure Triglav; 31.08.2014
comment
@JureTriglav все (включая IE) - person bguiz; 01.09.2014
comment
Да, должно работать с чем-либо выше IE 8. Требуется ли url-friendly-colour для кроссбраузерной поддержки? Из моего тестирования это не нужно, а просто интерполяция цвета напрямую работает: fill="#{$color}. - person Jure Triglav; 01.09.2014
comment
Спасибо! Работал на меня. В Chrome я работал, используя: fill='#{$fg-color'} Но Firefox не принял бы это. Я мог бы использовать определения цвета rgb(), это тоже работает. Но мне ваша функция SASS лучше... - person Bartezz; 18.10.2015
comment
@JureTriglav Все еще нужна поддержка Firefox. Пришлось сегодня воспользоваться. :) - person Dennis Best; 07.10.2016
comment
Это годы спустя, но я только что использовал опцию @JureTriglav, и это сработало проще всего. - person frankie4fingers; 23.12.2018
comment
Я нашел этот сайт полезным для предоставления вам идеально закодированного URL-адреса, готового к использованию: yoksel.github.io/url-encoder — просто скопируйте в него код SVG и скопируйте возвращенный CSS :-) - person Friendly Code; 11.02.2020

arrow_upward
5
arrow_downward

Не ответ на ваш вопрос, а альтернативный способ добиться аналогичного результата во многих случаях (подумайте о простых одноцветных значках). Вы можете использовать маску-изображение CSS следующим образом:

i.icon-back {
  background-color: $fg-color; 
  mask-image: url('data:image/svg…');
}

Браузерная поддержка масок CSS отсутствует в Edge/IE на момент написания этой статьи.

person Frank Lämmer    schedule 15.02.2018

arrow_upward
0
arrow_downward

Лучшее решение

// SASS 
$nt-link-color
.circle{
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill:#{toRGB($nt-link-color)};' width='24' height='28' viewBox='0 0 24 28'><path d='M24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'></path></svg>")  no-repeat;
}

// FUNCTION
@function toRGB ($color) {
  @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
person Biju B Adoor    schedule 29.08.2019