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
0
votes
1 answer

Initiate new center on load SVG pan zoom

To change the position of an SVG with SvgPanZoom one has to use panZoomInstance.pan({x: *value*, y: *value*}); But this causes SvgPanZoom to move the SVG initially from center to the new position, as it will first place the SVG in the middle of…
Hirschferkel
  • 291
  • 4
  • 20
0
votes
1 answer

How to display scatter plot with R Packages:svgPanZoom?

I draw a picture using ggplot2 and want to display it in shinyApp with svgPanZoom packages. But the sactters is disappear. Anybody know why? You can run the following code for…
Jiajin.Chen
  • 83
  • 7
0
votes
2 answers

How to display scrollbar in svg-pan-zoom?

I would like to know how can I enable the scrollbar while zooming with svg-pan-zoom. I've tried overflow: auto on external div or svg tag with no luck. Hopefully I can get some help here.
ukyang
  • 3
  • 1
0
votes
1 answer

How to set correct zoomScaleSensitivity for svgpanzoom library?

I am using svgpanzoom library (link on github repository) in my project . I was setting some initial value: var minValue = 0.8; var maxValue = 6; var numberOfSteps = 5; instance.setMinZoom(minValue); instance.setMaxZoom(maxValue); After that i…
Ihar
  • 1
  • 2
0
votes
1 answer

exclude SVG element only from zoom or only from pan functionality

I wonder is it possible to exclude SVG element (like circle) only from zoom (scale) functionality and preserve his panning. For example: in map i point my current position with red filled circle. When user zoom, i want that this circle have a…
xentia
  • 405
  • 1
  • 6
  • 18
0
votes
1 answer

Multiple svg files overlay

I use JavaScript library https://github.com/ariutta/svg-pan-zoom Is it possible to add multiple svg files overlay? The zoom function should be done on all the images. The goal is to build a map with dynamic content. Thanks a lot for your…
swissscheese
  • 1
  • 1
0
votes
0 answers

Building an SVG map

First off I'm not looking for completed code. I'm am interested in ideas on how one might break this project down. I do have a concept in mind but it's getting quite complicated as I go, with re-rendering parts as the main map it pan/zoom about. …
Mike
  • 265
  • 2
  • 10
0
votes
2 answers

SVG-PanZoom doesn't work if container gets hidden

I have a SVG-Pan-Zoom instance embedded in an Tabbing-Component. When the active tab changes, the previous one gets hidden with display: none. After switching back to the first tab (which gets displayed again with display: block) the svgPanZoom…
Schleuse
  • 1
0
votes
2 answers

Is this possible to load svg code instead loading a file when using svg-pan-zoom?

I am using svg-pan-zoom to load add zoom-in and zoom-out function on my svg. But my svg is not store on a file, it is generate via js. I would like to to add a thumbnailViewer, according to their example, they put the svg inside an embed tag like…
DNB5brims
  • 29,344
  • 50
  • 131
  • 195
0
votes
1 answer

Is there a way to fit only vertically or horizontally in svg-pan-zoom.js library

This is not obvious from the documentation (if you can call README.md documentation ;) ), but the svg-pan-zoom library probably supports (only) vertical/horizontal fit, though how? Best fit is already supported through fit method and works fine. The…
rawpower
  • 1,850
  • 16
  • 18
0
votes
1 answer

how can i enable mousewheel so can i zoom + and - using jquery plugins(panzoom + circleslider)

how could I enable the mouse scroll. I'm using in my project a library called CircleSlider.js (you can read more about it here) and jquery.panzoom-1.7.0. So, I have made like a semi-circle where i could zoom in (+) and zoom out (-) by moving a…
Achref Gassoumi
  • 1,035
  • 10
  • 20
0
votes
1 answer

Calculating Svg tag width

I am new to SVG. I have a svg image, i have applied a transform matrix for a tag. Now I want to calculate tag width and height. on page load i can calculate width and height using getBBox() or getBoundingClientRec() functions. But when i am…
user2083041
  • 513
  • 1
  • 8
  • 32
0
votes
1 answer

Svgpanzooming with some HTML (probably div) elements inside a SVG

Firstly, thanks to whoever developed and help maintain svg-pan-zoom. It's been really helpful. Big props :) Anyway, I have a quick question to the svg-pan-zoom community. Is it at all possible to use svg-pan-zoom on a svg that has a HTML div inside…
brupbrap
  • 1
  • 4
0
votes
1 answer

Error on chrome when trying to access svg in object

I don't have much experience with coding and I'm trying to give a user some control over an SVG embedded in an element. I found the ariutta svgpanzoom.js library, but when I try to make a small test with it, I have a security error in chrome…
MzTr
  • 11
  • 4
0
votes
1 answer

fire pan/zoom events only when inside a defined g

Basically i'd like to fire pan/zoom events only when mouse\pinch occour on a specified group. PS: the layer demo allow transformation on a group but panning-zooming events still propagate from the svg tag
VeNoMiS
  • 330
  • 5
  • 15
1 2 3 4 5
6
7