Html 在SVG文件中的多个路径上应用悬停更改

我正在尝试在我在Figma上创建的图标上实现悬停效果的颜色更改， 问题是当我在悬停时更改填充路径时，只有当一个路径更改颜色而不是整个图标时

我的图标由两种颜色和8条路径组成

我的意图是改变SVG中所有路径的颜色。我做错什么了吗

HTML

CSS

#切换：悬停{
填充：#A70606；
}

如果要在所有路径上应用样式，应为其提供一个类。因此，如果您将id=“toggle”更改为class=“toggle”，那么它将起作用

---

元素不应具有相同的id。

如果要在所有路径上应用样式，应为其指定一个类。因此，如果您将id=“toggle”更改为class=“toggle”，那么它将起作用

---

元素不应具有相同的id。

注意id必须是唯一的。我建议区分这些类或使用公共类**

将

：hover

状态应用于SVG，如下所示：

svg:hover path {
  fill:red;
}

svg：悬停路径{
填充物：红色；
}

---

注意ID必须是唯一的。我建议区分这些类或使用公共类**

将

：hover

状态应用于SVG，如下所示：

svg:hover path {
  fill:red;
}

svg：悬停路径{
填充物：红色；
}

svg：悬停路径{
填充：#A70606；
}

svg：悬停路径{
填充：#A70606；
}

它可以工作，但以前也可以，但同样的问题仍然存在。如何一次将悬停效果应用于整个图标？我的问题是SVG图标由多个路径组成，我希望将鼠标悬停在图标上并更改颜色，而不是单个路径。这里的例子：它可以工作，但它以前工作过，但同样的问题仍然存在。如何一次将悬停效果应用于整个图标？我的问题是SVG图标由多个路径组成，我希望将鼠标悬停在图标上并更改颜色，而不是单个路径。这里的例子：为上下文添加的例子：为上下文添加的例子：非常感谢，这正是我需要的。该死的，比我快XD非常感谢，这正是我需要的。该死的，比我快XD