Приближение svg-изображения к курсору

Пытаюсь создать интерактивную карту (карта в формате svg). Проблема: не получается масштабировать карту в координаты курсора. Нашёл решение с помощью canvas, но так как на карте имеются ещё и другие объекты, которые не являются изображениями, приходится использовать тег image.

Уже не раз читал, что нужно рассчитать смещение, которое возникает при изменении параметра scale (при увеличении происходит смещение вправо-вниз, при уменьшении — влево-вверх), но ничего дельного у меня не вышло.

В данный момент использую такой неприятный код:

<div id="div_map">
  <img draggable="false" id="map" src="map.svg" alt="Изображение не загрузилось">
</div>
<script>
map = document.querySelector('#div_map')
function zoomIn() {
  map.style.scale = String(Number(map.style.scale) * 1.2);
  body.style.cssText += `
  margin-left: ${Number(body.style.marginLeft.slice(0, -2)) + Number(map.style.width.slice(0, -2)) * Number(map.style.scale) / 1.2 * 0.15}px;
  margin-top: ${Number(body.style.marginTop.slice(0, -2)) + Number(map.style.height.slice(0, -2)) * Number(map.style.scale) / 1.2 * 0.23}px;
`;
}

function zoomOut() {
  map.style.scale = String(Number(map.style.scale) / 1.2);
  
  body.style.cssText += `
  margin-left: ${Number(body.style.marginLeft.slice(0, -2)) - Number(map.style.width.slice(0, -2)) * Number(map.style.scale) * 1.2 * 0.12}px;
  margin-top: ${Number(body.style.marginTop.slice(0, -2)) - Number(map.style.height.slice(0, -2)) * Number(map.style.scale) * 1.2 * 0.19}px;
`;
}
</script>

Что-то мне подсказывает, что использование margin для сдвига картинки на экране не является правильным, поэтому не буду загружать этот пост комментариями о том, как я высчитывал смещение - всё равно оно работает не совсем правильно.

Бьюсь с проблемой уже не первый день. Надеюсь, что кто-то сможет помочь.

P.S Пишу вопрос в первый раз, поэтому если описал проблему как-то непонятно, недостаточно полно или ещё чего-то не хватает - я с радостью дополню.