@thedexploit
Сайтами маюсь

Как сделать эффект яркости при наведении на интерактивной карте SVG?

Доброго времени суток!

Делаю интерактивную картинку на SVG.
Суть такова. Есть картинка поля с садами. По умолчанию картинка полупрозрачная (стоит "opacity: 0.3"). Мне нужно, чтобы при наведении именно у деревьев прозрачность становилась нулевой и они были яркими.

Я разметил области, создал части, дерево выделяется всё окей, но оно заливается цветов (от параметра fill="#red"). Не знаю как просто убрать прозрачность у этого элемента, вместо заливки цветом.

Может кто-то подсказать?

Справа дерево выделяется красным.
5e43a35ccbcb4036876166.png

  • Вопрос задан
  • 201 просмотр
Пригласить эксперта
Ответы на вопрос 2
@nvdfxx
Senior Pomidor developer
можно поверх первой картинки наложить вторую с нулевой прозрачностью и clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) и через жс при наведении на svg преобразовывать path в clip-path, присваивать его картинке номер 2 и делать ей опасити 1
Ответ написан
@thedexploit Автор вопроса
Сайтами маюсь
В общем, как я решил задачу.

  1. Сперва я удалил все лишние элементы, оставил только то, что нужно выделять
  2. Сделал трассировку картинки в иллюстраторе. ВАЖНО: все элементы сгруппировать по отдельности. В моем случае, каждое дерево это группа.
  3. Сохраняем как SVG. Открываем редактором кода, и в css даем значение hover для "g" (групп)


Ну а дальше, стилизация как вам нужно.
5e58c71706703015100126.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы