具有SVG图像数据URI的背景图像中的SCSS变量

Question

在下面的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>");
}

......它完全相同 - 不处理变量.

---

注意:

我已经回顾了这些看似相似的问题,但不一样:

• 从SCSS创建数据URI
• 使用数据URI SVG作为CSS背景图像

Answer 1

首先,创建一个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不会.

Answer 2

不是您问题的答案，而是在许多情况下实现类似结果的替代方法（想想简单的单色图标）。您可以像这样使用 CSS mask-image：

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

在撰写本文时，Edge/IE 缺少对 CSS 掩码的浏览器支持。