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

Question

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

Answer 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