SVG图标：基于上下文使用CSS设置样式

是否可以根据SVG图标的上下文使用CSS设置其路径样式

我的SVG图标由两个路径组成：

<g id="shape-codepen"> 
    <path class="outer-ring"  d="..."></path> 
    <path class="inner-logo"  d="..."></path> 
</g>

但是我想改变第二个的部分颜色，因为它在不同的上下文中，即

.shape-codepen-red .outer-ring { fill: #f00; }

但这是行不通的

这里有一个简单的铅笔代码来说明我的问题：

---

是否可以根据图标的上下文部分更改图标路径的颜色？如何操作？

不……您不能像那样访问内部零件。您需要两个

use

元素。一个用于环，另一个用于内部形状

然后分别处理它们

.hide{
显示：无；
}
.图标{
宽度：75px；
高度：75px；
}
身体{
填充：20px；
}
.红色，红色{
填充物：红色；
}
.蓝色，蓝色{
填充：蓝色；
}

.outer-ring { fill: #999; }
.inner-logo { fill: #666; }

.shape-codepen-red .outer-ring { fill: #f00; }