Stack Overflow
Stack Overflow

Questions tagged [svgpanzoom]

JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks.

svgPanZoom is a JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks.

svgPanZoom (or svg-pan-zoom) is hosted on github - ariutta/svg-pan-zoom

Bugs, suggestions or code contributions should be done there. Any other types of questions should be posted on stackoverflow.

97 questions
8
votes
0 answers

R Shiny: how to keep zoom and pan from svgPanZoomOutput on input change?

I've got a Shiny app in which I'm displaying some images. For a selected image I have pan and zoom (using svgPanZoom package) and brightness change (using sliderInput). Also on button click I am moving to next image. Unfortunately whenever I'm…
Maju116
  • 1,607
  • 1
  • 15
  • 30
6
votes
2 answers

pand and zoom SVG image but when zoom in the image is not sharp

I am developing an React Native project. Our backend returns a URL which points to a remote SVG image. I need to not only show the SVG but also be able to pan and zoom it in the mobile app. To show remote SVG image, I use react-native-svg…
Leem.fin
  • 40,781
  • 83
  • 202
  • 354
4
votes
1 answer

PanZoom catch Touch Up event

I am using Panzoom JS to zoom in on a map. It is working just the way I need it for zooming in and out on mobile and desktop. When you click on an item on the map, I grab the x/y coordinates relative to the top left of the container taking into…
Chris
  • 833
  • 2
  • 17
  • 37
4
votes
1 answer

R svgPanZoom customize size and add locator

I am currently working on an Shiny app with the amazing package svgPanZoom and I have two questions which remain unsolved for me: (1) is it possible to customize the size of the graph dynamically. I tried to do that following the code (as in…
Charlotte Sirot
  • 931
  • 1
  • 8
  • 11
4
votes
1 answer

How to only allow pan within the bounds of the original SVG

Question: I want to bound the pan of the SVG so that when no zoom has been applied, no pan is possible, however as you zoom in you can pan around within the bounds of the SVG. Visual Example: In the image below the zoomed viewport in the center…
Dominic Woodman
  • 719
  • 2
  • 8
  • 18
3
votes
1 answer

How to set up d3-zoom correctly in vue?

I have svg where I render seats of venue. All seats are grouped by sectors. I need on seat click event, zoom in those seats which are in that sector, when I click another sector it should zoom out and zoom in again on new sector. Here is an example…
andre1ka
  • 33
  • 4
3
votes
3 answers

big size of svg not working proper how to set big svg in react-pan-zoon-svg?

here i am using react-pan-zoom-svg and try to load large SVG in zoomable area I am getting some issues 1) when svg load its not load from center point of svg 2) when i move SVG its matrix value take me negative 3) fit to screen not…
jay khatri
  • 151
  • 1
  • 13
3
votes
1 answer

Dynamically added children to svg-pan-zoom element do not pan/zoom, but previously added items do

I am creating an svg object with javascript, drawing a basic Sierpinski triangle, and then setting the svg object as a svg-pan-zoom. When zooming past a threshold, I try to re-draw the next level of triangles, which I can see on screen, but they do…
user3637385
  • 35
  • 3
3
votes
1 answer

Pan to specific X and Y coordinates and center image svg-pan-zoom

I am using the ariutta svg-pan-zoom library(https://github.com/ariutta/svg-pan-zoom). I am trying to pan to a specific shape at (x:1000, y:20) when the user clicks a button. I would also like the image to centre at this point. The Problem I am…
arjSharma
  • 181
  • 1
  • 9
2
votes
3 answers

How to get X,Y coordinates from path element inside SVG?

Here is a fiddle of what actually have. https://jsfiddle.net/Lofdujwr/ I'm using a library for zoom and pan an SVG svgpanzoom. I have a button when clicked it zooms on spain for example, so I put the coordinates in: $("#spain").on("click",…
Cristian
  • 342
  • 4
  • 17
2
votes
1 answer

Retaining line weight when zooming in svgpanzoom

As demonstrated in this codepen: https://codepen.io/genworks/pen/EeJNMO?editors=1010 svgpanzoom increases line thickness proportionally to the zoom level, at least with default options e.g. when called like this: var panZoomSVG1 =…
djc
  • 31
  • 4
2
votes
0 answers

How to add animation in SVG PanZoom

Can anyone help me to add animation when you zoom on the SVG using the panzoom library? I've already seen a solution about pan animation however I want a zoom animation. Please someone help... Thanks in advance.
alvinydev
  • 300
  • 2
  • 9
2
votes
2 answers

R svgPanZoom within shinyApp display different in the Web and Rstudio

I draw a picture using R with packages svgPanZoom,svglite,ggplot2 and shiny. However, it can display correctly on Rstudio but not on Web. Are there any options to solve it? Please run the following code for…
Jiajin.Chen
  • 83
  • 7
2
votes
1 answer

angular2 svgPanZoom, window is not defined, webpack issue?

I would like to implement a zoom feature on my website which has a SVG image displayed. I saw this library github.com/ariutta/svg-pan-zoom which provides the exact features i need, However i can't seem to get it to work with angular2, window is not…
mwoa
  • 713
  • 7
  • 16
1
2 3 4 5 6 7