svg-pan-zoom — Pan and zoom to same location in different browser sizes

问题

I am using the ariutta svg-pan-zoom library(https://github.com/ariutta/svg-pan-zoom). (Also using with jquery.layout.js panes and jquery-ui.js)

I would like to save the values such as pan and zoom values of an svg-pan-zoom svg and use those values in to jump to the same location using a browser with a different sized window.

Currently I am using getPan() and getZoom() to save the values; then zoom(zoom) and pan(pan) in the other browser to zoom and pan to the same location. That does not work when the browser window size is different.

I found this article, but it does not address a window that is a different size:
Pan to specific X and Y coordinates and center image svg-pan-zoom

回答1:

Pan and zoom are relative to current container size. So what you want is to compute the center point of visible SVG's part. Then in new window compute what should be the new pan to have the that SVG's point (that was the center in previous case). As about the zoom it depends on how you want to make it work, but you could use the real zoom.

To get container sizes and real zoom use instance.getSizes().

So for example to compute x axis do:

var s = instance.getSizes()
var p = instance.getPan()
var relativeX = s.width / 2 / (p.x + s.viewBox.width * s.realZoom)

// After resize
var s = instance.getSizes()
var p = instance.getPan()
var x = (s.width / 2 / relativeX) - s.viewBox.width * s.realZoom
instance.pan({x: x, y: 0})

Do the same for Y axis

来源：https://stackoverflow.com/questions/33622644/svg-pan-zoom-pan-and-zoom-to-same-location-in-different-browser-sizes