Доброе утро.
Ни в Google, и ни на каком ресурсе нет информации о том, как правильно реализовать интерактивную карту.
Очень нуждаюсь в вашей помощи. При изменении размера окна SVG элементы не совпадают с элементами в изображении.
ViewBox правильный, пути(атрибут d) прописаны правильно, но при изменении размера окна, даже на 1 пиксель, все рушится.
Смотрел уже готовые сайты на которых уже реализовано подобное. Я там заметил, что родительский
div в котором
svg и
img, при изменении размера автоматически меняет ширину и высоту. Для того чтобы убедиться, я поменял те значения на другие. Эффект не такой как у меня, но заметно, что там тоже происходит "не попадание" элементов на те, что в изображении. Скорее всего проблема именно в этом.
Пример:
<div class="resizable div_100" style="width: 1788.44px; height: 1006px; top: 0px; left: -211.722px;">
Для наложения этих двух элементов я использую следующую структуру:
<div class="someClass">
<svg></svg>
<img />
</div>
Почему так происходит?
Как решить проблемку?
И где я могу прочитать статью, документацию о том, как грамотно реализовать интерактивную карту?
Очень вас прошу, дайте совет, помоги решить проблемку.
У меня уже не осталось сил искать, так как в интернете нет почти ничего...
Заранее спасибо! 
Средний
Средний
Простой
