从SASS编译时，CSS背景url SVG填充颜色不工作（非base64）

我正在使用SASS生成css，并尝试创建一个点重复模式，以使用背景图像SVG模拟

abbr

标记上的

边框底部

我已经深入搜索，但找不到解决方案，因为我正在使用sass使用父类修改特定站点重音的填充颜色

填充在SVG中的
元素上

下面是我的俏皮话

ABBR {
  text-decoration: none !important;
  cursor: default !important;
  border: none;
  position: relative;

  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: {
      image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$body-color}" /></svg>');
      repeat: repeat;
    }

    @include accent-colors {
      background: {
        image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$accent-color}" /></svg>') !important;
      }
    }
  }
}

ABBR{
文字装饰：无！重要；
游标：默认！重要；
边界：无；
位置：相对位置；
&：之后{
内容：''；
显示：块；
位置：绝对位置；
左：0；
右：0；
底部：-2px；
高度：1px；
背景：{
image:url（'data:image/svg+xml；utf8'）；
重复：重复；
}
@包括强调色{
背景：{
image:url（'data:image/svg+xml；utf8'）！重要；
}
}
}
}



这是我编译的CSS，你可以看到我的填充颜色输出很好

ABBR {
  text-decoration: none !important;
  cursor: default !important;
  border: none;
  position: relative; }

  ABBR:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#393e44" /></svg>');
    background-repeat: repeat; }

    .accent-green ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#96d63d" /></svg>') !important; }

    .accent-blue ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#5e80f6" /></svg>') !important; }

    .accent-teal ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#2fb8cd" /></svg>') !important; }

    .accent-pink ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#ff6e9e" /></svg>') !important; }

    .accent-purple ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#ca63e5" /></svg>') !important; }

    .accent-orange ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#fd923a" /></svg>') !important; }

    .accent-red ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#e73e50" /></svg>') !important; }

ABBR{
文字装饰：无！重要；
游标：默认！重要；
边界：无；
位置：相对；}
缩写：之后{
内容：''；
显示：块；
位置：绝对位置；
左：0；
右：0；
底部：-2px；
高度：1px；
背景图像：url（'data:image/svg+xml；utf8'）；
背景重复：重复；}
绿色口音缩写：在{
背景图像：url（'data:image/svg+xml；utf8'，）！重要；}
.口音蓝色缩写：之后{
背景图像：url（'data:image/svg+xml；utf8'，）！重要；}
.口音蓝绿色缩写：在{
背景图像：url（'data:image/svg+xml；utf8'，）！重要；}
.口音粉色缩写：之后{
背景图像：url（'data:image/svg+xml；utf8'，）！重要；}
.口音紫色缩写：之后{
背景图像：url（'data:image/svg+xml；utf8'，）！重要；}
.口音橙色缩写：在{
背景图像：url（'data:image/svg+xml；utf8'，）！重要；}
.口音红色缩写：之后{
背景图像：url（'data:image/svg+xml；utf8'，）！重要；}



当我使用inspector查看元素css时，似乎没有错误，它使用的是正确的重音类SVG背景。但没有显示填充颜色




我已将SVG代码作为
.SVG
文件上传。放大时，可以看到SVG
rect
元素上的填充是粉红色的，并且正在工作。代码直接从Chrome的web inspector复制。因此，这在css背景图像属性中不起作用的原因非常奇怪。看看下面

SVG



有关我在使用sass时遇到的问题的确切回复，请参见下面的链接

小提琴

如果检查dom中的
：after
元素，并从
rect
fill color值中删除
#
，您将看到SVG工作，但显示为黑色。或者查看这个版本，我使用字符串替换函数删除了



小提琴

SVG可以工作，但同样是黑色的，因此不能完全工作。
在SVG中，
需要编码，并替换为
%23

因此，您需要创建一个函数来进行替换。即：

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

然后，对于svg，直接放置它而不是变量：

   background: {
      image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{url-encoded-color($body-color)}" /></svg>');
      repeat: repeat;
    }

背景：{
image:url（'data:image/svg+xml；utf8'）；
重复：重复；
}

完整示例：
尝试对图像进行如下编码：
背景图像：url（“数据：image/svg+xml，%3Csvg xmlns=”）http://www.w3.org/2000/svg“width='2'height='1'%3E%3rect width='1'height='1'fill='%23393e44'/%3E%3C/svg%3E”）这个：
%23
而不是
#
和其他替代品。只需对
#
进行编码就可以了。谢谢你的评论。宾果，谢谢你为一位美女工作。