Как реализовать такое (SVG карта)?

Question

[Dave]

На веб-сайте https://mininnovation.uz/ru наткнулся на очень интересную реализацию карты (прокрутите вниз). При клике на любой фрагмент карты, сохраняется "точка" где был произведен клик и добавляется полоса. На рисунке обвел.



В целом непонятно вообще как реализована выделенная часть красным.
Как вообще такое что-то похожее?

Answer 1

[VoidVolker]

Элементарно - по событию "клик":

1. Показываем фрейм с информацией
   
2. Вычисляем координаты левого нижнего угла фрейма
   
3. В координатах клика рисуем отметку
   
4. Рисуем отрезок по двум точкам - клика и левого нижнего угла
   

Comments

[Dave]

Спасибо за ответ. Обязательно ли для этого использовать Canvas? Просто там на сайте он используется.

[Анатолий Куликов]

Dave, обычно рисование графики реализуется через холст, т.к. банально проще. Как/то по-другому это будет сложнее выполнить,

[VoidVolker]

Dave нет, не обязательно - можно использовать SVG, например.