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

Question

我目前正在尝试对我在 Figma 上创建的图标实现悬停效果的颜色变化，问题是当我在悬停时更改填充路径时，仅当一条路径更改颜色而不是整个图标时。

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

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

HTML

<button id="filter-btn" href="#" target="">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="#A70606" xmlns="http://www.w3.org/2000/svg">
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 9.19999C23 9.64182 22.6418 9.99999 22.2 9.99999H7.8C7.35817 9.99999 7 9.64182 7 9.19999C7 8.75817 7.35817 8.39999 7.8 8.39999H22.2C22.6418 8.39999 23 8.75817 23 9.19999Z" fill="#757575"/>
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 10C3.55228 10 4 9.55228 4 9C4 8.44772 3.55228 8 3 8C2.44772 8 2 8.44772 2 9C2 9.55228 2.44772 10 3 10ZM3 11C4.10457 11 5 10.1046 5 9C5 7.89543 4.10457 7 3 7C1.89543 7 1 7.89543 1 9C1 10.1046 1.89543 11 3 11Z" fill="#757575"/>
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 4.19999C23 4.64182 22.6418 4.99999 22.2 4.99999H7.8C7.35817 4.99999 7 4.64182 7 4.19999C7 3.75817 7.35817 3.39999 7.8 3.39999H22.2C22.6418 3.39999 23 3.75817 23 4.19999Z" fill="#C1C1C1"/>
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 14.2C23 14.6418 22.6418 15 22.2 15H7.8C7.35817 15 7 14.6418 7 14.2C7 13.7582 7.35817 13.4 7.8 13.4H22.2C22.6418 13.4 23 13.7582 23 14.2Z" fill="#C1C1C1"/>
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 19.2C23 19.6418 22.6418 20 22.2 20H7.8C7.35817 20 7 19.6418 7 19.2C7 18.7582 7.35817 18.4 7.8 18.4H22.2C22.6418 18.4 23 18.7582 23 19.2Z" fill="#C1C1C1"/>
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3.55228 5 4 4.55228 4 4C4 3.44772 3.55228 3 3 3C2.44772 3 2 3.44772 2 4C2 4.55228 2.44772 5 3 5ZM3 6C4.10457 6 5 5.10457 5 4C5 2.89543 4.10457 2 3 2C1.89543 2 1 2.89543 1 4C1 5.10457 1.89543 6 3 6Z" fill="#C1C1C1"/>
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 20C3.55228 20 4 19.5523 4 19C4 18.4477 3.55228 18 3 18C2.44772 18 2 18.4477 2 19C2 19.5523 2.44772 20 3 20ZM3 21C4.10457 21 5 20.1046 5 19C5 17.8954 4.10457 17 3 17C1.89543 17 1 17.8954 1 19C1 20.1046 1.89543 21 3 21Z" fill="#C1C1C1"/>
        <path id="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 15C3.55228 15 4 14.5523 4 14C4 13.4477 3.55228 13 3 13C2.44772 13 2 13.4477 2 14C2 14.5523 2.44772 15 3 15ZM3 16C4.10457 16 5 15.1046 5 14C5 12.8954 4.10457 12 3 12C1.89543 12 1 12.8954 1 14C1 15.1046 1.89543 16 3 16Z" fill="#C1C1C1"/>
    </svg>
</button>

CSS

#toggle:hover {
    fill: #A70606;
}

Answer 1

如果你想在所有路径上应用样式，你应该给它一个 class。所以如果你把id="toggle"改成class="toggle"，那么它就可以了。

元素绝不能具有相同的 ID。

Answer 2

注意 ID 必须是唯一的。我建议区分这些或使用常见的 class .**

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

svg:hover path {
  fill:red;
}

svg:hover path {
  fill: red;
}

<button id="filter-btn" href="#" target="">
<svg width="24" height="24" viewBox="0 0 24 24" fill="#A70606" xmlns="http://www.w3.org/2000/svg">
<path id="toggle1" fill-rule="evenodd" clip-rule="evenodd" d="M23 9.19999C23 9.64182 22.6418 9.99999 22.2 9.99999H7.8C7.35817 9.99999 7 9.64182 7 9.19999C7 8.75817 7.35817 8.39999 7.8 8.39999H22.2C22.6418 8.39999 23 8.75817 23 9.19999Z" fill="#757575"/>
<path id="toggle2" fill-rule="evenodd" clip-rule="evenodd" d="M3 10C3.55228 10 4 9.55228 4 9C4 8.44772 3.55228 8 3 8C2.44772 8 2 8.44772 2 9C2 9.55228 2.44772 10 3 10ZM3 11C4.10457 11 5 10.1046 5 9C5 7.89543 4.10457 7 3 7C1.89543 7 1 7.89543 1 9C1 10.1046 1.89543 11 3 11Z" fill="#757575"/>
<path id="toggle3" fill-rule="evenodd" clip-rule="evenodd" d="M23 4.19999C23 4.64182 22.6418 4.99999 22.2 4.99999H7.8C7.35817 4.99999 7 4.64182 7 4.19999C7 3.75817 7.35817 3.39999 7.8 3.39999H22.2C22.6418 3.39999 23 3.75817 23 4.19999Z" fill="#C1C1C1"/>
<path id="toggle4" fill-rule="evenodd" clip-rule="evenodd" d="M23 14.2C23 14.6418 22.6418 15 22.2 15H7.8C7.35817 15 7 14.6418 7 14.2C7 13.7582 7.35817 13.4 7.8 13.4H22.2C22.6418 13.4 23 13.7582 23 14.2Z" fill="#C1C1C1"/>
<path id="toggle5" fill-rule="evenodd" clip-rule="evenodd" d="M23 19.2C23 19.6418 22.6418 20 22.2 20H7.8C7.35817 20 7 19.6418 7 19.2C7 18.7582 7.35817 18.4 7.8 18.4H22.2C22.6418 18.4 23 18.7582 23 19.2Z" fill="#C1C1C1"/>
<path id="toggle6" fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3.55228 5 4 4.55228 4 4C4 3.44772 3.55228 3 3 3C2.44772 3 2 3.44772 2 4C2 4.55228 2.44772 5 3 5ZM3 6C4.10457 6 5 5.10457 5 4C5 2.89543 4.10457 2 3 2C1.89543 2 1 2.89543 1 4C1 5.10457 1.89543 6 3 6Z" fill="#C1C1C1"/>
<path id="toggle7" fill-rule="evenodd" clip-rule="evenodd" d="M3 20C3.55228 20 4 19.5523 4 19C4 18.4477 3.55228 18 3 18C2.44772 18 2 18.4477 2 19C2 19.5523 2.44772 20 3 20ZM3 21C4.10457 21 5 20.1046 5 19C5 17.8954 4.10457 17 3 17C1.89543 17 1 17.8954 1 19C1 20.1046 1.89543 21 3 21Z" fill="#C1C1C1"/>
<path id="toggle8" fill-rule="evenodd" clip-rule="evenodd" d="M3 15C3.55228 15 4 14.5523 4 14C4 13.4477 3.55228 13 3 13C2.44772 13 2 13.4477 2 14C2 14.5523 2.44772 15 3 15ZM3 16C4.10457 16 5 15.1046 5 14C5 12.8954 4.10457 12 3 12C1.89543 12 1 12.8954 1 14C1 15.1046 1.89543 16 3 16Z" fill="#C1C1C1"/>
</svg>
</button>

Answer 3

svg:hover path {
    fill: #A70606;
}

 <button id="filter-btn" href="#" target="">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#A70606" xmlns="http://www.w3.org/2000/svg" id="toggle">
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 9.19999C23 9.64182 22.6418 9.99999 22.2 9.99999H7.8C7.35817 9.99999 7 9.64182 7 9.19999C7 8.75817 7.35817 8.39999 7.8 8.39999H22.2C22.6418 8.39999 23 8.75817 23 9.19999Z" fill="#757575"/>
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 10C3.55228 10 4 9.55228 4 9C4 8.44772 3.55228 8 3 8C2.44772 8 2 8.44772 2 9C2 9.55228 2.44772 10 3 10ZM3 11C4.10457 11 5 10.1046 5 9C5 7.89543 4.10457 7 3 7C1.89543 7 1 7.89543 1 9C1 10.1046 1.89543 11 3 11Z" fill="#757575"/>
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 4.19999C23 4.64182 22.6418 4.99999 22.2 4.99999H7.8C7.35817 4.99999 7 4.64182 7 4.19999C7 3.75817 7.35817 3.39999 7.8 3.39999H22.2C22.6418 3.39999 23 3.75817 23 4.19999Z" fill="#C1C1C1"/>
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 14.2C23 14.6418 22.6418 15 22.2 15H7.8C7.35817 15 7 14.6418 7 14.2C7 13.7582 7.35817 13.4 7.8 13.4H22.2C22.6418 13.4 23 13.7582 23 14.2Z" fill="#C1C1C1"/>
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M23 19.2C23 19.6418 22.6418 20 22.2 20H7.8C7.35817 20 7 19.6418 7 19.2C7 18.7582 7.35817 18.4 7.8 18.4H22.2C22.6418 18.4 23 18.7582 23 19.2Z" fill="#C1C1C1"/>
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3.55228 5 4 4.55228 4 4C4 3.44772 3.55228 3 3 3C2.44772 3 2 3.44772 2 4C2 4.55228 2.44772 5 3 5ZM3 6C4.10457 6 5 5.10457 5 4C5 2.89543 4.10457 2 3 2C1.89543 2 1 2.89543 1 4C1 5.10457 1.89543 6 3 6Z" fill="#C1C1C1"/>
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 20C3.55228 20 4 19.5523 4 19C4 18.4477 3.55228 18 3 18C2.44772 18 2 18.4477 2 19C2 19.5523 2.44772 20 3 20ZM3 21C4.10457 21 5 20.1046 5 19C5 17.8954 4.10457 17 3 17C1.89543 17 1 17.8954 1 19C1 20.1046 1.89543 21 3 21Z" fill="#C1C1C1"/>
                                            <path class="toggle" fill-rule="evenodd" clip-rule="evenodd" d="M3 15C3.55228 15 4 14.5523 4 14C4 13.4477 3.55228 13 3 13C2.44772 13 2 13.4477 2 14C2 14.5523 2.44772 15 3 15ZM3 16C4.10457 16 5 15.1046 5 14C5 12.8954 4.10457 12 3 12C1.89543 12 1 12.8954 1 14C1 15.1046 1.89543 16 3 16Z" fill="#C1C1C1"/>
                                            </svg>
                                 </button>

你必须添加 PATH

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

Apply Hover changes on multiple paths in SVG files

html

css

svg

glyphicons