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

Question

我使用SASS产生我的CSS，我试图创建一个点重复模式，以模拟border-bottom在abbr使用背景图像的图像SVG标签。

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

填充<rect ... />位于 SVG 中的元素上。

这是我下面的sass...

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;
      }
    }
  }
}

这是我编译的 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; }

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

我已将 SVG 代码作为.svg文件上传。当您放大时，您可以看到 SVGrect元素上的填充为粉红色且有效。代码直接从 Chrome 的网络检查器中复制。所以这真的很奇怪为什么这在css背景图像属性中不起作用。看看下面。

SVG https://a.uguu.se/ZvcDJWMpf5fl_accent-pink.svg

有关使用 sass在jsfiddle中我的问题的确切存储库，请参阅下面的链接。

小提琴 https://jsfiddle.net/joshmoto/j8on1b9v/

如果您检查:afterdom 中的元素并#从rect填充颜​​色值中删除 ，您将看到 SVG 工作，但它显示为黑色。或者查看这个版本，我已经#使用字符串替换功能删除了它。

小提琴 https://jsfiddle.net/joshmoto/L1g5fo34/2/

SVG 可以工作，但又是黑色的，所以不能完全工作。

Answer 1

在 svg 中，#需要进行编码，并替换为%23.

所以你需要创建一个函数来进行替换。IE：

@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;
    }

完整示例：https : //jsfiddle.net/niklaz/26Ljsmdu/3/