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

Question

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

我进行了深入搜索，但找不到解决方案，因为我正在使用 sass 使用父级 class.

修改特定网站口音的填充颜色

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

下面是我的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 时，似乎没有错误并且它使用了正确的重音 class SVG 背景。但是没有显示填充颜色。

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

SVGhttps://a.uguu.se/ZvcDJWMpf5fl_accent-pink.svg

使用 sass.

在 jsfiddle 中查看我的问题的确切回购，请参见下面的 link

Fiddle https://jsfiddle.net/joshmoto/j8on1b9v/

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

Fiddle 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/

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

CSS background url SVG fill color not working (not base64) when compiling from SASS

css

svg

sass

fill

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