代码之家 › 专栏 › 技术社区 › joshmoto

CSS背景url SVG填充颜色不工作(非base64)

fill sass svg

joshmoto · 技术社区 · 7 年前

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

我搜索了很深,但找不到解决方案,因为我正在使用sass修改父类中特定站点重音的填充颜色。

填充物在 <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; }

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

我将SVG代码作为 .svg 文件。放大时,可以看到SVG上的填充 rect 元素是粉红色的,工作正常。代码直接从Chrome的web检查器复制。因此,奇怪的是,为什么在css background image属性中这不起作用。看看下面。

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

请参阅下面的链接以获取有关我在中的问题的精确回购 jsfiddle 使用sass。

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

如果你检查 :after 元素,并删除 # 从 矩形 填充颜色值您将看到SVG工作,但它显示黑色。或者看看这个我删除了 #

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

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

1 回复 | 直到 7 年前

Nikola Kirincic 7 年前

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