Question

我正在使用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的网络检查器中复制。因此，这在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/

从SASS编译时，CSS背景网址SVG填充颜色不起作用（不适用于base64）

1 个答案: