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

Question

[Влад Серов]

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

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

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

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

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

Answer 1

[nvdfxx]

можно поверх первой картинки наложить вторую с нулевой прозрачностью и clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) и через жс при наведении на svg преобразовывать path в clip-path, присваивать его картинке номер 2 и делать ей опасити 1

Comments

[Влад Серов]

Получается у меня будет по умолчанию скрытая яркая картинка, а при наведении на нужный элемент, он будет становиться видимым. Верно?

[nvdfxx]

Влад Серов, да, что-то вроде того

[Влад Серов]

nvdfxx, а адаптивность потом нормально подтянется если таким методом реализовывать?

Нашел пример подобного решения, без JS, вроде

[nvdfxx]

Влад Серов, можно и без жс, но значения для clip-path задолбаетесь считать, наверно. С адаптивом все ок будет, если правильно реализовать

Answer 2

[Влад Серов]

В общем, как я решил задачу.

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

Ну а дальше, стилизация как вам нужно.