Как делают план-карту квартир на сайт?

Question

[Роман]

Приветствую.

Подскажите, чем и как делают планировку квартир?

Например этажность: sky-skolkovo.ru/plans
Сама планировка: sky-skolkovo.ru/plans/section1/floor9

Интересует, как создают правильной формы обводку нужной формы при hover и удержания всплывшей информации у курсора?

Спасибо

Comments

[posters]

Альтернативное решение, про которое все всегда забывают.
htmlbook.ru/content/karty-izobrazheniya
https://basicweb.ru/html/karta.php
Всплывающие подсказки сделать к ним не сложно.

Answer 1

[Владимир Коротенко]

Этот конкретный сделали на svg
Взяли рендер и разметили регионы подсветкой

Comments

[Роман]

Но не руками же указывали, где какой слой находится и т.д. !?

[Одиночка Айс]

Роман Лазарев, именно что руками

[Владимир Коротенко]

Роман Лазарев, Берете adobe illustrator

Кидаете подложку.
Создаете слой для первого этажа. обрисовываете (тут кстати схалтурили см 5 этаж 2 секция)
Потом копируете слой и нижние точки перетаскиваете до верхней границы.
Повторяете до завершения.

После экспортируете в svg

[Алексей Скляров]

Роман Лазарев, вы когда в иллюстраторе рисуете, например, каждый этаж или кв у вас хранится в виде слоя, затем при страивании svg в DOM у вас есть возможность обратиться к самому слою и оперировать стилями данного слоя.

[Роман]

Спасибо, буду смотреть.