SASS编译后CSS背景URL中SVG填充色失效问题（非Base64）

我最近在做一个需求：用SASS生成CSS，通过SVG背景图片创建重复的点状图案，模拟<abbr>标签的下划线效果，还希望能通过父类修改SVG中<rect>元素的填充色，匹配不同的站点主题色。结果折腾了半天，遇到了一个头疼的问题——浏览器里CSS加载正常，主题类对应的SVG背景也正确加载了，但SVG里的填充色就是不显示。把SVG代码存成单独文件时显示正常，甚至去掉填充色里的#后SVG变成黑色，还是达不到预期效果。

先给大家看看我最开始写的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; }

问题原因 #

其实问题出在data URI里的#字符——浏览器会把#当作URI的片段标识符，而不是颜色值的一部分，所以SVG解析时根本没拿到正确的十六进制颜色值。

解决方案 #

这里给大家两种可行的解决方法：

方法1：转义#字符

把SVG填充色里的#转成URI编码的%23，这样浏览器就能正确识别颜色值了。修改后的SASS代码片段如下：

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="%23{$body-color}" /></svg>'); 
  repeat: repeat; 
}

对应的主题类部分也要把#换成%23，这样编译后的CSS里颜色值就能被正确解析了。

方法2：用currentColor实现动态颜色（推荐）

这个方法更优雅，不用每个主题都生成不同的SVG。我们可以把SVG里的fill设为currentColor，然后通过CSS的color属性来控制填充色，这样父类只要修改color，SVG的填充色就会自动继承：

修改后的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;
    color: $body-color; // 默认颜色
    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="currentColor" /></svg>'); 
      repeat: repeat; 
    } 
    @include accent-colors { 
      color: $accent-color !important; // 主题类修改color即可
    } 
  } 
}

编译后，每个主题类只需要修改ABBR:after的color属性，SVG会自动继承这个颜色作为填充色，既简洁又避免了URI编码的问题。

内容的提问来源于stack exchange，提问作者joshmoto