给 svg img 设置颜色

众所周知，当你使用 html img 标签引用 svg 时，无论 base64 格式还是 url 格式，你都是没法修改它的颜色的。

<img class="avatar" src="https://xxx.com/default.svg" />

这样会导致，在某些场景下如果用户需要上传自定义图标并提供颜色设置时，我们往往得考虑通过 fetch 请求获取到 svg 字符串，再解析成 DOM 节点插入 html，最后再通过 fill 属性给 svg 设置颜色。整体相对复杂。

有没有纯 CSS 的方案能快速搞定这一切？研究了一下，还真有！

即 mask-image CSS 属性。

mask-image

根据 mask-image MDN 解释，该属性可以设置元素蒙版层的图像，蒙版层你可以把它理解为遮罩层。

mask 和 background 的层级关系如下：

┌───────────────────┐
│    mask 遮罩层     │
│       ↑           │
│  background 背景层 │
└───────────────────┘

mask 在 background 上层，如果你用过 PhotoShop，那理解起来应该很容易了。

如此一来，思路就有了，我们可以给 background 层设置背景颜色，再给 mask 层设置 svg 图片，叠加起来，就可以达成给 svg 图片染色的效果了！

<div class="yellow-star"></div>

<style>
.yellow-star {
  width: 100px;
  height: 100px;
  background-color: yellow;
  mask-image: url(star.svg); /* 用法类似 background-image */
}
</style>

可以去这里查看详细示例。

其它

不过使用 mask-image 给 svg 图片设置颜色也有一定使用限制，即仅支持单色带透明度设计的 svg 图标。如果表面上镂空的图标实际填充了颜色，显示就会有所问题。