如何修改通过background属性引用的SVG背景图的填充颜色？

以下是几种可落地的实现方式，你可以根据自己的场景选择：

方案1：使用CSS mask 属性（最推荐，无需修改SVG源文件） #

直接将SVG作为遮罩层使用，通过修改背景色即可控制图标颜色，兼容性覆盖绝大多数现代浏览器：

.icon {
  /* 兼容webkit内核浏览器 */
  -webkit-mask: url("~images/icon.svg") center no-repeat;
  mask: url("~images/icon.svg") center no-repeat;
  /* 保证遮罩尺寸适配容器 */
  -webkit-mask-size: contain;
  mask-size: contain;
  /* 这里设置的颜色就是图标的填充色 */
  background-color: blue;
  /* 空行内元素需要设置宽高和显示模式才能正常展示 */
  width: 24px;
  height: 24px;
  display: inline-block;
}

HTML代码不需要做任何修改。

方案2：修改SVG源文件使用 currentColor 动态继承颜色 #

适合可以修改SVG源文件的场景，修改后可以通过CSS的color属性直接控制图标颜色：

1. 打开icon.svg源文件，将所有固定的fill属性删除，或者替换为fill="currentColor"，示例修改后的SVG结构：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <!-- 你的图标path代码 -->
</svg>

2. 调整CSS代码，给图标设置对应的color属性即可：

.icon {
  background: url("~images/icon.svg") center no-repeat;
  background-size: contain;
  color: blue;
  width: 24px;
  height: 24px;
  display: inline-block;
}

这种方式的优势是后续修改颜色非常灵活，还可以继承父元素的color属性。

方案3：将SVG转为Data URI内嵌到CSS中 #

不需要修改源文件，直接把SVG代码转义后内嵌到CSS的url里，手动指定填充色：

.icon {
  /* 替换下方data URI里的SVG代码为你自己的图标代码，fill属性设置为你需要的颜色即可，注意特殊字符要做URI转义 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='blue'%3E%3Cpath d='你的图标路径代码'/%3E%3C/svg%3E") center no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
}

注意需要把SVG代码中的<转义为%3C、>转义为%3E、#转义为%23等特殊字符，否则会识别失败。

方案4：使用CSS filter 属性调整颜色 #

完全不需要修改现有代码，只需要加filter属性调整颜色即可，适合临时快速修改的场景：

.icon {
  background: url("~images/icon.svg") center no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  /* 调整以下参数可以将图标转为蓝色，你可以根据实际需求微调参数 */
  filter: brightness(0) saturate(100%) invert(28%) sepia(94%) saturate(3227%) hue-rotate(202deg) brightness(97%) contrast(89%);
}

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