Применить изменения Hover к нескольким путям в файлах SVG

В настоящее время я пытаюсь реализовать изменение цвета при наведении на значок, который я создал на 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;
}

svg html css glyphicons
person Ricardo Filipe    schedule 25.11.2019    source источник
comment
Добавлен пример для контекста: i.imgur.com/cQva0CQ.jpg   -  person Ricardo Filipe    schedule 25.11.2019

Ответы (3)


arrow_upward
0
arrow_downward 

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

person Community    schedule 25.11.2019

arrow_upward
2
arrow_downward

Идентификаторы Note должны быть уникальными. Я бы предложил различать их или использовать общий класс .**

Примените состояние :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>

person Paulie_D    schedule 25.11.2019
comment
Большое спасибо, это именно то, что мне нужно. - person Ricardo Filipe; 25.11.2019
comment
Блин, быстрее меня XD - person ; 25.11.2019

arrow_upward
0
arrow_downward

Если вы хотите применить стиль ко всем путям, вы должны дать ему класс. Поэтому, если вы измените id="toggle" на class="toggle", то это сработает.

Элементы никогда не должны иметь одинаковый идентификатор.

person zerk    schedule 25.11.2019
comment
Это работает, но раньше работало, но та же проблема сохраняется. как применить эффект наведения сразу ко всей иконке? Моя проблема в том, что значок SVG состоит из нескольких путей, и я хочу навести курсор на значок и изменить цвет, а не отдельные пути. Пример здесь: i.imgur.com/cQva0CQ.jpg - person Ricardo Filipe; 25.11.2019