Klicken Sie, um zu den Svg-Koordinaten zu gehen

Question

Ich habe eine SVG-Karte, die ich hinein gezoomt habe und in einem div einer kleineren Größe enthalten ist. Ich habe eine Drop-Box mit allen Namen der Orte und beim Klicken möchte ich die SVG-Karte innerhalb der div zu den bestimmten X-und Y-Koordinaten bewegen. Ich habe das schon so lange versucht und das scheint mir nicht möglich zu sein. Ich habe versucht, mit der Viewbox herumzuspielen und Eigenschaften zu transformieren, aber alles, was sie tun, ist, die SVG auszuschneiden.

irgendwelche Vorschläge?

Answer 1

Sie können so etwas wie svg-pan-zoom verwenden:

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) 
}); 

Wo 1000 ist die width des svg und 500 ist die height. Sie können auch mit der Devid um 2 spielen, wenn Sie brauchen.