（发布另一个答案，因为这是超级不同）
演示：
（理想情况下，您应该先阅读说明，但如果您想先查看最终结果...）
前端：https://codepen.io/devanshj/pen/OomRer
后台：https://glitch.com/edit/#!/mature-teller?path=server.js:8:0
解释：
在我看到这篇文章之前，我无法理解你想用这些面具和背景（而不是直接的 svgs）来实现什么：Coloring SVGs in CSS Background Images...
本文中的解决方案对您不起作用的原因是您想要多个彩色 svg（本文中的解决方案仅适用于单个 svg）
结合文章解决的问题，以及您想要的最终目标，我将重新构建问题，如下所示：
- 我想在一个元素上有多个 svg 背景
- 我也想控制每个svg的颜色
- 只有 css 解决方案。不允许更改 html。
这几乎是不可能的。我说“漂亮”，因此有可能（使用超级非凡的解决方案）。
几乎不可能的部分是为 svg 着色。仅使用 css 的多个 svg 背景很简单。
但是如果我做一些从 url 本身为 svg 着色的事情，比如url(my-icon.svg?fill=#f00) 如果我能做到这一点，你的问题就解决了，我们可以做类似的事情：
.icon-a{
background-image: url("a.svg?fill=%23000"); // # encoded to %23 so that server doesn't think #000 is the hash part of the request
&.icon-b{
background-image: url("a.svg?fill=%23000"), url("b.svg?fill=%23fff");
&:hover{
background-image: url("a.svg?fill=%23000"), url("b.svg?fill=%23f00");
}
}
}
这可以用一点服务器代码来完成（在这里使用 express 和 nodejs，也可以为其他语言/框架编写类似的代码）：
app.get("/icons/*.svg", async (req, res) => {
let svgCode = await readFileAsync(path.join(__dirname, req.path), {encoding: "utf8"});
svgCode = svgCode.replace(/{{queryFill}}/g, req.query.fill);
res.set("Content-Type", "image/svg+xml");
res.send(svgCode);
});
和 svg：
<svg xmlns="http://www.w3.org/2000/svg">
<style>
.query-fill{
fill: {{queryFill}};
}
</style>
<rect x="0" y="0" width="100" height="100" class="query-fill"></rect>
</svg>
替代方案：
如果您允许我更改 html，使用内联 svg 和 <use> 解决方案将非常简单...但我猜您想要纯 css 解决方案...
PS：如果您想知道是否有没有任何服务器代码的解决方案？没有。
PPS ：如果重新构建的问题不是您想要的，那么您正在寻找的东西（分层蒙版）仅使用 css 是不可能的。