Css SVG sprite中的多种颜色

我有一个SVG精灵，如下所示

使用

标记技术时，似乎无法从CSS访问SVG的各个部分

我知道，通过使用

fill:currentColor

（请参阅

#图标中的
.path1
两个部分

符号），可以通过使用

color

和

fill

值将两种不同的颜色从CSS应用到同一SVG的不同部分

以这种方式使用SVG时，是否有任何方法将两种以上的颜色应用于同一元素

例如，是否可以将四种颜色应用于

#图标四部分

符号内的四条路径

div{
显示：内联块；
}
.图标{
显示：内联块；
宽度：80px；
高度：40px；
填充：当前颜色；
}
.图标一部分{
颜色：绿色；
}
.图标两部分{
颜色：绿色；
填充物：红色；
}

图标一部分
图标两部分
图标四部分

您可以自行设置符号定义的样式。例如：

#icon-one-part {
    fill: green;
}

#icon-two-part .path1 {
    fill: green;
}
#icon-two-part .path2 {
    fill: red;
}

但是如果你需要重复使用同一个图标，并且每个实例都是不同的颜色，那么你只能使用

currentColor

技术。

事实上，

元素是一个引用，它将指向的内容克隆到阴影DOM中。它不是被SVG定义替换的占位符。这就是为什么可以为符号定义本身而不是图标设置样式。样式化定义会像任何css属性一样传播到图标。祖先不知道子项，但可继承的样式仍在传播…
但是我们希望在不改变其他实例的情况下，用不同的颜色填充每个路径，并且我们希望能够在必要时覆盖它

为此，我们可以使用CSS变量。
CSS变量与任何其他属性一样在规则集中声明。然后，将其声明为自身或任何子属性的值，它将被继承

让我们将此概念应用于SVG元素：

div{
显示：内联块；
边缘底部：20px；
}
.图标{
显示：内联块；
宽度：80px；
高度：40px；
填充：当前颜色；
}
.icon-one-part.green{
--颜色1：绿色；
}
.icon-one-part.red{
--颜色1：红色；
}
.icon-2-part.style1{
--颜色-1:#ff9900；
--颜色-2:#78ae90；
}
.icon-2-part.style2{
--颜色-1:#2124af；
--颜色-2:#ef5b59；
}
.icon-four-part.style1{
--颜色-1:#FB7C1F；
--颜色-2:#F38D68；
--颜色-3:#FB7C1F；
--颜色-4:#F38D68；
}
.icon-four-part.style2{
--颜色-1:#007978；
--颜色-2:#23518C；
--颜色-3:#83B692；
--颜色-4:#4AA0CF；
}

图标一部分
图标两部分
图标四部分

为什么不喜欢使用普通的类选择器？请参阅规范：“对于支持CSS样式的用户代理，将被引用元素的概念性深度克隆到未公开的DOM树中也会复制由CSS级联在被引用元素及其内容上产生的任何属性值。CSS2选择器可以应用于原始（即引用）元素，因为它们是正式文档结构的一部分。CSS2选择器无法应用于（概念上）克隆的DOM树，因为其内容不是正式文档结构的一部分。“

用于相同的副本。如果这不是您预期的用例，

不是正确的答案。是的，这就是问题所在。我需要能够分别设置符号的各个实例的样式。哦，内联SVG看起来是最好的解决方案。虽然我试图避免它。