Выделение SVG элементов?

Question

[Михаил]

Всем привет!
Есть немного SVG элементов.
Криволинейных.
Но контуры у всех этих элементов - одинаковые, прямоугольные.
Они все находятся в одном контейнере, у всех position:absolute, и все прямоугольники совпадают друг с другом.
Т.е. при наведении мы попадаем на прямоугольник, в который вписана фигура.
Интересует, как сделать их контуры так же криволинейными, чтобы мы могли наводить на каждый элемент по отдельности. И они не перекрывали друг друга.

Как вариант, может быть лучше делать такое на Canvas? Не знаю. Или какой конвертер может есть из SVG в Canvas? Я смотрел в интернете, нашел какой-то сервис, но он не очень как-то мне понравился.

Или если не Canvas, то как-то отсекать SVG.

Или css clip-path?

тут пример.
https://codepen.io/mk3mk/pen/qBErqBW?editors=1100

Comments

[Rustam Bainazarov]

А есть варианты расположить все фигуры в один SVG?

[Михаил]

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

[Rustam Bainazarov]

Михаил, есть толк, смотрите, никаких проблем с зонами взаимодействия (наводите на этажи у правого здания):

[Михаил]

Можно делать их конечно размером не на весь большой общий прямоугольник, а поменьше, но это все равно не то. Как-то так:

[Михаил]

попробовал в одном файле сделать, но тут вообще ничего не выделяется, пробовал элементы "g" и "path" стилизовать, но надо наверно как-то не так... не знаю

вот тут пример, что получается
https://codepen.io/mk3mk/pen/qBErmJa?editors=0100

[Варлам Ерофеич]

Михаил, попробовал ховер каждому полю:
https://codepen.io/warsan/pen/vYExJgq?editors=1100

[Михаил]

Варлам Ерофеич, это то , что надо! Спасибо!!!