0

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 this:

  <embed id="thumbView" type="image/svg+xml" src="tiger.svg" class="thumbViewClass"/>

But my svg is not a static file, how can I solve that? Any idea? Thanks.

http://ariutta.github.io/svg-pan-zoom/demo/thumbnailViewer.html

DNB5brims
  • 29,344
  • 50
  • 131
  • 195

2 Answers2

0

For the full answer check the same issue on GitHub.

Basically you'll have to create 2 similar SVGs (and update them in parallel) as that's how the plugin works. Other than that you should use the plugin as with any other inline SVG (there are many examples of inline SVGs).

bumbu
  • 1,297
  • 11
  • 29
0

Yes sure! you can use the inline SVG with the example here: http://ariutta.github.io/svg-pan-zoom/demo/inline.html

<svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" width="100%" height="500px" viewBox="0 0 2049 1393">

var panZoom = svgPanZoom('#demo-tiger', {
    viewportSelector: viewportGroupElement
});
d3vma
  • 161
  • 2
  • 10