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
2
votes
2 answers

How ThumbnailViewer example has to be adapted when using instead of ?

I am using the ariutta svg-pan-zoom library(https://github.com/ariutta/svg-pan-zoom). Now I want to create a ThumbnailViewer like described in the demo files (view-source:http://ariutta.github.io/svg-pan-zoom/demo/thumbnailViewer.html). Instead of…
Dierk
  • 31
  • 2
2
votes
1 answer

createSVGMatrix is not a function : SVG loading on Firefox but not on Chrome

Using svgpanzoom, angularjs and jquery i'm building a SPA designed to view different SVG. It's working with firefox (except for some other issues) but not on chrome. In my html I have this :
Ellone
  • 3,644
  • 12
  • 40
  • 72
1
vote
1 answer

Limit zoom horizontally

I have a svg element, displayed in a normal div (fiddle here) window.panZoom = svgPanZoom('#limit-svg', { zoomEnabled: true, controlIconsEnabled: true, minZoom: 1, maxZoom: 10, beforePan: beforePan }); As it is now, the zoom stops at 1…
Gustavo De Cinque Caléfi
  • 26
  • 4
1
vote
0 answers

Get translated SVG Point with svgpanzoom

In trying to get the SVG point from the mouse in my Blazor application, im doing this in razor page public async Task SvgElementOnMouseMove(MouseEventArgs e) { var point = jsInProcess3.Invoke("getSVG_XY", refSvgElement, e.ClientX,…
Tim Davis
  • 524
  • 6
  • 17
1
vote
0 answers

Modify Actions of Reset Control

I wanted to execute some additional code when the panzoom 'reset' option is selected by the end-user, but there is no setOnReset API. I was looking for a recommended way of executing custom code in addition to the standard resetZoom() and…
ACProctor
  • 284
  • 2
  • 17
1
vote
0 answers

d3js zoom and pan exclude marker

I'm new to d3js and trying to implement zoom and panning to a specific layer. While zooming the floorplan(attached image) the marker size also changes accordingly. Ideally the marker should change position with its fixed size based on panning or…
Satya
  • 11
  • 1
1
vote
1 answer

Search SVG in svg-pan-zoom

So I am using svg-pan-zoom to display a dynamically loaded SVG element. The code for loading the element is similar to the example here: https://ariutta.github.io/svg-pan-zoom/demo/dynamic-load.html (to see what I mean, view the source). What I am…
Patrick Flynn
  • 11
  • 1
1
vote
0 answers

drag svg child after zoom via angular

I have two circles in an SVG. the SVG is draggable (with angular9 and material) and can zoom on it via changing the scale. in normal zoom (100%) circles are dragged into SVG very good, but when set new scale for example 1.5 on SVG, circles are…
mahdi rahimzade
  • 111
  • 1
  • 8
1
vote
2 answers

How to pan and zoom to fit an element with SvgPanZoom

I'm using svg-pan-zoom library and I need to pan/zoom the view to fit a particular element. I could use fit method but it fits the whole content in this case I need to fit only one particular element. Another option can be to calculate the pan and…
Tobia
  • 9,165
  • 28
  • 114
  • 219
1
vote
0 answers

avoid zoom transform from resetting after svg is clicked d3

I have a svg element ; the nodes, links, labels etc. are appended to it. I got the zoom-to-particular-node-by-name functionality running but the issue is after zooming automatically to the respective node , whenever I try to pan svg (by clicking and…
amipro
  • 378
  • 3
  • 14
1
vote
1 answer

JS get svg object inside embed

I've got some simple html like below, and I need to access the SVG object in a JS script, and I'm having a horrible time of it.

Demo…

SuperStew
  • 2,857
  • 2
  • 15
  • 27
1
vote
1 answer

download the svg file from DOM or from Object element

I want to download/save .svg from the DOM. I have embedded my svg file in Object element and updating dynamically some of the elements inside SVG and styling it in my Angular 7 application.
Rama Mohan
  • 151
  • 1
  • 7
1
vote
1 answer

how to update Viewbox in svg-pan-zoom library?

Im trying to use svg-pan-zoom library, and when zoomin/out and mouse drag mouse x,y position is going wrong, and want to update it but no idea how to do it. this is how I create svgPanZoom: panZoom(x,y){ this.panZoomResizer = svgPanZoom('svg',{ …
B.Muz
  • 11
  • 3
1
vote
1 answer

Can I Limit The Moving With svg-pan-zoom?

I'm using svgpanzoom, but movement is unlimited. Is there a way to limit this? I do not want to limit the zoom, I want to limit the movement of svg. Example: After too much moving.
sidney
  • 1,241
  • 15
  • 32
1
vote
1 answer

How to use svg-pan-zoom library with Angular4?

window.onload = function() { svgPanZoom('#demo-tiger', { zoomEnabled: true, controlIconsEnabled: true }); }; the above code doesn't work with Angular ??
user3157468
  • 11
  • 1
  • 3
1
2
3 4 5 6 7