Как поменять цвет заливки в SVG?

Как можно изменить цвет заливки SVG элементов при наведении без необходимости использования id для привязки к элементам? Пример кода представлен на codepen.
  • 8 января 2024 г. 17:47
Ответы на вопрос 2
Если вы хотите изменить цвет заливки элементов внутри SVG при наведении, не используя id, вы можете сделать это с использованием CSS. Вы добавляете стили для SVG элементов и используете псевдокласс `:hover` для определения стилей при наведении курсора мыши. 

Ниже приведен пример, как это может выглядеть:

```css
svg path {
  fill: #000; /* начальный цвет заливки */
  transition: fill 0.3s ease; /* добавляем плавность изменения заливки */
}

svg path:hover {
  fill: #f00; /* цвет заливки при наведении */
}
```

Добавьте эти стили в тег `<style>` внутри head вашего HTML или внутри внешнего CSS файла, если ваш SVG находится в CodePen или на вашем сайте.

Если у вас есть SVG прямо в HTML-коде, пример вашего кода может выглядеть примерно так:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Fill Color Change on Hover</title>
<style>
  svg path {
    fill: #000;
    transition: fill 0.3s ease;
  }
  svg path:hover {
    fill: #f00;
  }
</style>
</head>
<body>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="... ваш путь ..."/>
</svg>
</body>
</html>
```

Замените `... ваш путь ...` на значение атрибута `d` вашего пути в SVG.

Теперь, когда вы наведете курсор на элемент `path` внутри SVG, его цвет заливки должен измениться с черного на красный. Этот подход работает для любых SVG элементов с заливкой, таких как `circle`, `rect`, `polygon` и т.д. Просто примените тот же CSS, заменив `path` на соответствующий тег.

Этот метод не требует использования id и является типичным способом добавления интерактивности к SVG элементам с помощью CSS.
заливка одинаковая у всех сердец? если да, то описание градиента выносится в отдельный блок или оставляется только в первом svg, а остальные его спокойно используют
Похожие вопросы