Как изменить цвет SVG при наведении?

Чтобы изменить цвет SVG при наведении в CSS, можно использовать псевдокласс :hover. Вот шаги, которые нужно выполнить:

1. Начните с определения SVG элемента в HTML. Это можно сделать с помощью тега <svg> или <img> с использованием атрибута src, указывающего на файл SVG.

Пример с использованием <svg>:

<svg class="my-svg" ...>
  ...
</svg>

Пример с использованием <img>:

<img src="path/to/my-svg.svg" class="my-svg" alt="My SVG">

2. Создайте CSS правило для класса, который вы присвоили SVG элементу. В данном случае класс .my-svg будет использован.

.my-svg {
  fill: #000; /* Устанавливает начальный цвет SVG элемента */
  transition: fill 0.3s; /* Добавляет плавное изменение цвета */
}

3. В CSS файле, где определены ваши стили, добавьте правило :hover для класса .my-svg. В этом правиле вы можете установить новый цвет при наведении.

.my-svg:hover {
  fill: #ff0000; /* Устанавливает новый цвет SVG элемента при наведении */
}

4. Сохраните и перезагрузите вашу веб-страницу. Теперь цвет SVG элемента будет меняться при наведении на него курсора.

Важно отметить, что изменение цвета SVG при наведении может быть осуществлено только в том случае, если SVG файл не задает собственный цвет за пределами CSS. Если SVG файл уже имеет заполнение (fill) или обводку (stroke), то вам нужно будет изменить его напрямую в самом SVG файле, а не в CSS.