Как сделать hover на этажи здания наезжающие друг на друга?

Question

[Ruenes]

Доброго времени суток.
Вопрос состоит так - есть проект здания, нужно сделать ховер на каждый этаж, чтобы при клике открывался план этажа, но проблема в том, что здание под разными углами. Вот фото - https://take.ms/Xyrw9 (красным выделены 2 этажа, 1 и 2й). Помогите пожалуйста где искать решение и к каким инструментам обращаться?

Comments

[Rustam Bainazarov]

SVG:

[origami1024]

Рустам Байназаров, нойс, только каким инструментом легче всего будет пути рисовать?

[Rustam Bainazarov]

origami1024, любым нормальным векторным. Illustrator, Inkscape или же, как в моём случае, BoxySVG, там сразу есть удобный просмотр разметки, которую можно править:


После чего опционально стоит прогнать SVG в SVGO для оптимизации (но аккуратно, он может и соединить пути и группы).

Answer 1

[Rustam Bainazarov]

У вас только SVG как вариант действий. Карты изображений не позволят стилизации + они неадаптивны.

+ можно покликать, чтобы посмотреть, что через JS есть нормальный доступ:


Сделать это можно любым нормальным векторным редактором: Illustrator, Inkscape или же, как в моём случае, BoxySVG, там сразу есть удобный просмотр разметки, которую можно править:

Comments

[Ruenes]

Рустам, не пойму как мне привести мой svg к вашему виду, если не сложно, обьясните как мой svg "причесть"?
P.S. У меня в свг уже есть этажи в красном цвете и общая картинка здания, но как их в path засунуть не пойму.

https://dropmefiles.com/r5say - SVG

[Rustam Bainazarov]

Ruenes, я за ПК не буду ещё дня три. Если у вас подсвеченные этажи — это отдельно вырезанные картинки, то вставляйте поверх общей картинки, а границы обтравляйте с помощью маски.

А лучше, просто тупо сделать несколько путей поверх одной картинки вам вручную, как это сделал я. По изображению из тела вопроса видно, что там ничего нет сложного, поэтому просто красным цветом с прозрачностью вполне себе может обойтись, как в моём примере.

Answer 2

[igumenov]

html map
https://www.image-map.net/

Comments

[Rustam Bainazarov]

О нет. Это неадаптивно + не позволит покрасить область при наведении.

[igumenov]

тогда можно положить поверх изображения некую прозрачную свг и при наведении подсвечивать

[Rustam Bainazarov]

igumenov, да, конечно, так и нужно.