Click to go to svg coordinates

Question

I have a svg map that I have zoomed way into and is contained in a div of a smaller size. I have a drop box with all the names of the locations and on click I want the svg map inside the div to move to the specific x and y coordinates. I've been trying to do this for so long and I don't seem to be able to do so. I tried to mess around with the viewbox and transform properties but all they do is cut the svg out.

any suggestions?

Answer 1

You can use something like 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)
 });

Where 1000 is the width of the svg and 500 is the height. Also you can play with the devid by 2 if you need.