IE11 Performance

[Kwoin]

Bug report

Expected behaviour

svgPanZoom performed in a reasonable time (< 5sec)

Actual behaviour

svgPanZoom performed in > 45sec

Steps to reproduce the behaviour

1. use svgPanZoom() on an inline SVG with more than 30k nodes

Configuration

• svg-pan-zoom version: 3.5.2
• Browser(s): IE11
• Operating system(s): Windows 7

More Explanations

I use SvgPanZoom on massive SVG (+30k nodes).
There is an expectable delay while SvgPanZoom performs its treatments. This delay is very short on FF or Chrome, but is more than 45sec on IE11!
I inspected the code : the delay is caused by the creation of the viewport and the deplacement of all the graphic nodes into it. (svg-utilities.js l.62).

I tried to display: none the svg parent element, without any improvements.

if (!viewport) {
      var viewportId = 'viewport-' + new Date().toISOString().replace(/\D/g, '');
      viewport = document.createElementNS(this.svgNS, 'g');
      viewport.setAttribute('id', viewportId);

      var parent = svg.parentNode;
      parent.style.display = "none";
      var svgChildren = svg.childNodes || svg.children;
      var length = svgChildren.length;
      // Internet Explorer (all versions?) can't use childNodes, but other browsers prefer (require?) using childNodes
      var start = performance.now();
      var k = 0;
      if (!!svgChildren && svgChildren.length > 0) {
        for (var i = svgChildren.length; i > 0; i--) {
          // Move everything into viewport except defs
          if (svgChildren[svgChildren.length - i].nodeName !== 'defs') {
            viewport.appendChild(svgChildren[svgChildren.length - i]);
            k++;
          }
        }
      }
      var end = performance.now();
      console.log("svg manipulation took " + (end - start) + " ms");
      console.log(k + " / " + length + " nodes manipulated");
      svg.appendChild(viewport);
      parent.style.display = "";
    }

Result is :

svg manipulation took 45050.880227233756 ms
30413 / 30413 nodes manipulated

Do you guys know a way to improving this ?
45sec is just not usable ;s

[bumbu]

Hi @Kwoin,

Please check this comment on a related issue.

In short the solution is to create that viewport by yourself (say on the server or whenever your SVGs are generated). I don't know of any other solutions.

Hope this helps.