带有 SVG 图像数据 URI 的背景图像中的 SCSS 变量答案

【问题标题】：SCSS variable in background image with SVG image data URI带有 SVG 图像数据 URI 的背景图像中的 SCSS 变量
【发布时间】：2014-10-18 03:01:25
【问题描述】：

在下面的 SCSS 中，我想在 url background-image 属性中使用 fg-color 变量。

$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>");
}

...完全一样——变量没有被处理。

注意：

我已经查看了这些问题，这些问题看起来相似，但并不相同：

【问题讨论】：

@cimmanon 我会忽略你评论的刻薄。无论如何，是的，我尝试过使用该变量，而我得到的输出根本没有做任何替换。我将更新我的问题以准确显示我得到的结果。
@cimmanon 我找到了一种方法来做到这一点。事实证明，这比简单地“使用变量”要复杂得多。

标签： css svg sass data-uri

【解决方案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 无效。

【讨论】：

这是一个有趣的方法，您使用的是哪个浏览器？对我来说，只需使用 fill="#{$color}" 就可以了。
@JureTriglav 全部（包括 IE）
是的，应该适用于 IE 8 以上的任何东西。跨浏览器支持是否需要 url-friendly-colour？根据我的测试，没有必要，只需直接插入颜色即可：fill="#{$color}.
谢谢！为我工作。在 Chrome 中，我通过使用：fill='#{$fg-color'} 让它工作，但 Firefox 不会接受这个。我可以使用 rgb() 颜色定义，也可以。但我你的 SASS 功能更好......
@JureTriglav 仍然需要 Firefox 支持。今天不得不用。 :)

【解决方案2】：

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

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

Browser support for CSS masks 在撰写本文时缺少 Edge/IE。

【讨论】：

【解决方案3】：

更好的解决方案

// 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)+ ")";
}

【讨论】：

svg 不显示