Как добавить hover эффект svg спрайту?

Можно ли добавить ховер эффект такому svg элементу:
вот сама иконка

вот вывод иконки

Как добавить ховер эффект (закрасить в другой цвет) если я вывожу иконку таким образом?
Я перепробовал все стандартные варианты:

Ссылка на codepen

Дополнительно:

Убираете инлайновый fill и красите на здоровье

А ещё лучше перейти с символьных спрайтов на стеки и не мусорить в разметке, а использовать mask
Сборка стеков, например: https://www.npmjs.com/package/gulp-stacksvg
Также они вставятся и в use и в css в качестве content, bg или mask.
Про маски https://codepen.io/noahblon/post/coloring-svgs-in-...

+ Заказать

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

    • Как добавить hover эффект svg спрайту?Есть ответ
    • 07.04.2024
    Ответить

    Для добавления hover эффекта к элементам в SVG спрайте, вам потребуется использовать CSS. Вот пример того, как это можно сделать:

    1. Создайте свой SVG спрайт, объединив все ваши SVG иконки в один файл.

    2. Добавьте ваш SVG спрайт в HTML документ, используя тег с атрибутом display: none; чтобы скрыть его отображение.

    3. Для каждой иконки в спрайте укажите уникальный id.

    4. В CSS файле определите стили для каждой иконки, используя соответствующий id. Например:

    5. Теперь, когда вы наводите курсор на элемент с id="icon1", его цвет будет меняться на красный.

    6. Повторите этот шаг для всех иконок в вашем спрайте, чтобы добавить hover эффект для каждой из них.

    Таким образом, вы сможете добавить hover эффект к вашему SVG спрайту, делая его более интерактивным и привлекательным для пользователей.

Оставить комментарий