Как скейлить svg карту как гугл карту?

Question

[Дима Долготер]

Есть крта svg. Каждая страна это path как можно увеличить скролом этоу карту, двигать ее мышкой и увеличивать на телефоне и двигать как гугл карту. d3 не работает (дергается и на телефоне слишком чувствительный. уменьшал параметры на телефоне чтоб убрать сильную чувствительность но сработало не полностью и все еще дергается.)
Вот сайт. (все полностью законно и это просто информация на американский рынок. Никак не продажа или типа того)

Answer 1

[Дима Долготер]

сделал все максимально просто
дока тут

<script src='https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js'    query='#svg' name='pz'></script>

let move_y=0;
       let move_x=0;
       $(".zoom").on("click", function() {pz.zoomTo(move_x, move_y, 1.25)})
       $(".unzoom").on("click", function() {pz.zoomTo(move_x, move_y, 0.8)})
       $(".arrdown").on("click", function() {  pz.moveTo(move_x, move_y+=10) })
       $(".arrup").on("click", function() {pz.moveTo(move_x, move_y-=10) })
       $(".arrright").on("click", function() {pz.moveTo(move_x+=10, move_y) })
       $(".arrleft").on("click", function() {pz.moveTo(move_x-=10, move_y) })

Answer 2

[Recreator]

использовать готовый плагин, например svg.panzoom.js

Answer 3

[profesor08]

Оберни свою свг в контейнер, и навешивай все ивенты на этот контейнер. На основе полученных данных из ивентов двигай карту.

Comments

[Дима Долготер]

как скейлить карту? берешь и скейлишь!

[profesor08]

Дима Долготер, мне код за тебя писать? Я указал на типичные косяки, из-за которых подобные вещи работают через жопу. Не хочешь разбираться - бери готовую тулзу из ответа выше.

[Дима Долготер]

profesor08, что ты указал? навешивай ивенты?