Как реализовать ломаные линии css адаптивно?

Question

[WebforSelf]

Есть такое изображение



На нем условно метка, место на карте ( разместил с помощью position absolute) и хотел добавить ломанную линию.

Но суть в том, что при адаптиве естественно все сползает, вопрос такой.

Может сделать все литым изображением? но хотел на метку сделать ховер эффект , поэтому наверное отпадает.

Ну либо создавать много calc и пытаться подгонять при изменении экрана, кто что посоветует?

Comments

[Stranger in the Q]

я уже писал, подойдет svg изображение

Answer 1

[Сергей Зенькович]

Можно попробовать линию с точкой сделать отдельной PNG и позиционировать ее абсолютно карты. Ну либо попробовать реализовать через канвас. Извини бро, но пока все мысли на этот счет!

Answer 2

[Aleksey Solovyev]

Возможно, Вам подойдет map элемент. Задайте относительные позиции для меток(area tag) на карте-картинке и анимируйте их при наведении.

А так конечно лучше через SVG и preserveAspectRatio рисовать: карта России

Answer 3

[profesor08]

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