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

Posted 2023-03-06

【中文标题】从SASS编译时CSS背景网址SVG填充颜色不起作用（不是base64）[重复]

【英文标题】：CSS background url SVG fill color not working (not base64) when compiling from SASS [duplicate]

【发布时间】：2019-07-31 03:05:48

【问题描述】：

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

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

填充位于 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"  ><rect   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"  ><rect   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"  ><rect   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"  ><rect   fill="#96d63d" /></svg>') !important; 

    .accent-blue ABBR:after 
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  ><rect   fill="#5e80f6" /></svg>') !important; 

    .accent-teal ABBR:after 
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  ><rect   fill="#2fb8cd" /></svg>') !important; 

    .accent-pink ABBR:after 
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  ><rect   fill="#ff6e9e" /></svg>') !important; 

    .accent-purple ABBR:after 
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  ><rect   fill="#ca63e5" /></svg>') !important; 

    .accent-orange ABBR:after 
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  ><rect   fill="#fd923a" /></svg>') !important; 

    .accent-red ABBR:after 
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  ><rect   fill="#e73e50" /></svg>') !important; 

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

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

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

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

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

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

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

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

【问题讨论】：

尝试像这样对图像进行编码：background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='1'%3E%3Crect width='1' height='1' fill='%23393e44' /%3E%3C/svg%3E"); 这个：%23 而不是# 和其他替换。

只对# 进行编码似乎可以解决问题。感谢您的评论。

【参考方案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"  ><rect   fill="#url-encoded-color($body-color)" /></svg>');
      repeat: repeat;
    

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

【讨论】：

宾果游戏，谢谢你辛苦了。