Javascript 如何设置SVG的样式<；使用>；悬停元素？

我是SVG的初学者。我试图用css更改悬停在特定

元素上的多个

元素的样式，但我做不到，因为

元素使用

阴影DOM

我有以下

：

...

我有一组元素，其中包含几个

元素：

例如，当我将鼠标悬停在

#action圆圈上时，我需要用id
#api svg
更改
填充元素

我该怎么做？也许有另一种方法可以在悬停状态下渲染可重用元素并设置其样式。
定义路径，使其具有
fill=“inherit”
，然后您应该能够在
元素的样式上设置
fill=“whatever”
，这样就可以了


使用：悬停{
填充物：红色；
}

在圆圈上空盘旋！
这里没有什么过于复杂的东西。只需更改“use”元素，而不是defs区域中的任何内容（除非您希望它影响引用它的所有内容）

您可以通过普通css或css选择器设置use元素的样式，例如，它的id可能是最简单的

或者，您可以在正在处理的svg“use”元素上设置fill svg属性

除非我遗漏了什么，否则您不需要填充继承或任何东西。
我需要将默认填充设置为
fill:#fff
。因为所有SVG元素都被解析并在画布上呈现，以创建my
的屏幕截图。fill inherit在这里什么都不做，只需将其忽略，它应该可以正常工作。