1

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

Community
  • 1
  • 1
art guy
  • 35
  • 1
  • 9

1 Answers1

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

bumbu
  • 1,297
  • 11
  • 29
  • When I open a new browser with the pan x and y variables, where do I plug them into this code? I only see the relative x and y variables. Here is my code: – art guy Dec 01 '15 at 20:55
  • There are problems; panZoom({x: x, y: 0}) is not a function. After resize, var p = panZoom.getPan() is not used in your code. Was it supposed to be? – art guy Dec 02 '15 at 16:07
  • I did update the code. `panZoom` in my case was the `svgPanZoom` instance. Last line was wrong (but not hard to guess what it actually should be). – bumbu Dec 03 '15 at 09:24
  • Is there any reason why you are running this line after resize: var p = instance.getPan() – art guy Dec 04 '15 at 16:16
  • Just log all the values into the console and see what happens – bumbu Dec 05 '15 at 19:14
  • Sure, I will pay you or someone who can get this working on my codepan: http://codepen.io/AlmaTheYounger/pen/QNLxPG?editors=0011 – art guy Mar 02 '16 at 00:00