1

I'm using the https://github.com/ariutta/svg-pan-zoom library

I have a svg with an element "g" inside. This element has a viewBox = "2727 -2840 1630 1115"

I want to zoom in a specific point (which is inside the viewbox)

panzoom.zoomAtPoint(2, {x: 3000, y: -2500});

However it doesn't work. The svg got moved outside the viewbox apparently. It looks that the panzoom take as initial x,y = 0,0 and its viewbox is 0 0 900 787

Ruben
  • 1,015
  • 5
  • 17
  • 37

1 Answers1

2

zoomAtPoint is zooming into the rendered SVG point. For example if your original SVG viewport was 1000 by 1000, but the SVG element on page is of size 400 x 400 (and fit option is enabled) then:

  • Zooming to {x: 200, y: 200} will zoom to the center
  • Zooming to {x: 500, y: 500} will zoom outside of the SVG (as it currently has only 400 x 400)

This was done so that handling zooming by mouse is easy. If you need to zoom in a specific point then take a look at https://stackoverflow.com/a/33682381/1194327 and at https://github.com/ariutta/svg-pan-zoom/issues/183

Community
  • 1
  • 1
bumbu
  • 1,258
  • 11
  • 29
  • Hi, we want a function to zoom at a coordinate of the svg elements not at a point of the screen. Your zoom at point functions are impossible to use, their behavior is impossible to understand and they often do nothing. – reuns Dec 15 '21 at 10:03