0

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 instance is in an unusable state. I dont't really get what is going on.

I was able to reproduce this behaviour only in Google Chrome.

I've created an example to test this: http://svgpan-example.bitballoon.com/

Is this a bug, or am I missing something?

Schleuse
  • 1

2 Answers2

0

It seems to be a browser specific implementation. When you're setting display: none on the embed element (or its parent container) the browser most probably unloads the resource. After removing the display: none - it looks like the browser is reinitialising/reloading the resource. You can see that based on 2 facts:

  • In Network tabs of Developer Tools you can see that the resource is loaded again when you show the element
  • If you alter an element inside of SVG (in inspector), after hiding and showing - the change is gone.

svg-pan-zoom has no control over SVG changes from the external world, so it's not an issue. A solution is to use inline SVG (they worked for me when hiding/showing), or just test all other options (object and img tags). But an inline SVG is always the preferred method.

bumbu
  • 1,297
  • 11
  • 29
0

An object with display: hidden is removed from the flow of the DOM and so in some browsers will not have any dimensional data (width, height) at this time. My solution may be a bit hokey but... I needed an SVG in a bootstrap modal. So I put the svg element in the bottom of the body outside the modal, set the visibility: hidden. Then initialized svgPanZoom on it. Then moved it (using jQuery) into the hidden modal. This solved the problem for me.

    <div id="svgContainer" style="width: 400px; height: 400px; 
      border:1px solid black; padding:5px; overflow:hidden; 
      visibility: hidden"><svg>...</svg></div>
Mike
  • 265
  • 2
  • 10