Нажмите, чтобы перейти к координатам svg

Question

У меня есть svg-карта, с которой я увеличил масштаб и содержится в div меньшего размера. У меня есть поле для удаления со всеми именами мест, и по щелчку я хочу, чтобы карта svg внутри div перемещалась к определенным координатам x и y. Я пытался сделать это так долго, и, похоже, я не могу этого сделать. Я попытался возиться с viewbox и преобразовать свойства, но все, что они делают, - это вырезать svg.

любые предложения?

Answer 1

Вы можете использовать что-то вроде svg-pan-zoom:

var panZoom = window.panZoom = svgPanZoom('#svgid', { 
    zoomEnabled: true, 
    controlIconsEnabled: true 
}); 

panZoom.pan({x:0,y:0}); 

var realZoom= panZoom.getSizes().realZoom; 

panZoom.pan 
({ 
    x: -(1000*realZoom)+(panZoom.getSizes().width/2), 
    y: -(500*realZoom)+(panZoom.getSizes().height/2) 
}); 

Где 1000 является width в SVG и 500 является height. Также, если вам нужно, вы можете сыграть с дрейфом на 2.