Html 无法正确设置使用xlink:href显示的SVG的样式

我有一个SVG精灵，它包含许多图标，但为了保持简单，让我们假设它如下所示：

<svg>
    <symbol viewBox="0 0 612 612" id="icon-foo">
        <path class="a" d="..."/>
        <path class="b" d=..."/>
        <path class="c" d="..."/>
    </symbol>
</svg>

<svg id="bar">
    <use xlink:href='#icon-foo'></use>
</svg>

一切都很好，我看到了页面上的图标

问题：

正如您在sprite中所看到的，我在id为图标foo的

symbol

元素上有3个不同类的

path

元素，在我显示图标的页面中，svg元素的id为

bar

我希望能够使用css分别为每个

路径设置样式，但对我来说唯一有效的方法是如下设置样式：

#icon-foo .a {}
#icon-foo .b {}
#icon-foo .c {}

这不是很有用，尤其是如果我想在同一页上用不同的颜色/选项显示两次图标

理想情况下，我认为这样的事情可以奏效：

#bar .a {}
#bar .b {}
#bar .c {}

但它不起作用，因为显然我们的
#bar
元素中没有子元素
.a、.b、.c

我的问题：

使用
xlink:href
显示图标时是否可以单独设置路径样式，以及是否希望在页面上多次显示同一图标以单独设置路径样式？如果可能的话，那么如何实现呢？
不是按照您希望的方式设计的。它是为显示同一事物的多个副本而设计的。currentColor可以以非常有限的方式解决这一问题。
不是按您希望的方式设计的。它是为显示同一事物的多个副本而设计的。currentColor可以以非常有限的方式解决这一问题。