从SASS编译时，CSS背景网址SVG填充颜色不起作用（不是base64）[重复]

Question

这个问题在这里已有答案：

• SVG data image not working on Firefox or Chrome 72+ 3回答

我正在使用SASS生成我的css，我正在尝试创建一个虚线重复模式，以使用背景图像图像SVG模拟border-bottom标签上的abbr。

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

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

这是我的下面的...

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文件。当你放大你可以看到SVG rect元素上的填充是粉红色和工作。该代码直接从Chrome的Web检查器中复制。因此，为什么这在css背景图像属性中不起作用真的很奇怪。请在下面查看。

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

请参阅下面的链接，了解使用sass在jsfiddle中对我的问题的准确回购。

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

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

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

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

Answer 1

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

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