小编cam*_*wis的帖子

我正在研究一些 SVG 图标，因为<symbol>我希望能够在:hover、:focus和 上进行更改:active。具体来说，我需要能够更改 SVG 中特定路径的颜色。通常，对于任何其他元素，我可以做这样的事情

.parent .child {
    fill: blue;
}
.parent:hover .child {
    fill: red;
}

但是，当将此应用于我的 SVG 符号时，它不起作用。在过去几年中，我发现关于使用 Shadow-DOM 内容（如 SVG 符号）更改 css 的问题的讨论并不多，但仅使用 CurrentColor 对我来说不起作用，因为我需要使用两种颜色。

我这里有一个 CodePen 来记录我的场景

看起来这应该很简单，但我已经为此纠结了一段时间了。有人有任何可能有帮助的想法吗？

提前致谢！