title: createSVGMatrix is not a function : SVG loading on Firefox but not on Chrome
body: <p>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.</p>
  
  <p>In my html I have this :</p>
  
  <pre><code>&lt;object id="svgElement" type="image/svg+xml" data="../SVG/{{currentLanguage}}/{{currentCartography}}.svg"&gt;
      It seems your browser doesn't support SVG.
  &lt;/object&gt;
  </code></pre>
  
  <p>In my controller file I have outside of the controller :</p>
  
  <pre><code>window.onload = function() {
  document.getElementById("svgElement").style.width = window.screen.availWidth + "px";
  document.getElementById("svgElement").style.height = window.screen.availHeight + "px";
  window.panZoom = svgPanZoom('#svgElement', {
      zoomEnabled: true,
      controlIconsEnabled: true,
      fit: true,
      center: true,
      minZoom: 0.75,
      maxZoom: 50,
      zoomScaleSensitivity: 0.25,
      dblClickZoomEnabled: true
  });
  </code></pre>
  
  <p>};</p>
  
  <p>Inside my controller :</p>
  
  <pre><code>$scope.changeSVG = function (fileName) {
      $scope.currentCartography = fileName;
      window.panZoom.destroy();
      svgPanZoom('#svgElement').destroy();
      /* document.getElementById("svgElement").setAttribute("data", fileName);
       alert(document.getElementById("svgElement").getAttribute("data")); */
      window.panZoom = svgPanZoom('#svgElement', {
          zoomEnabled: true,
          controlIconsEnabled: true,
          fit: true,
          center: true,
          minZoom: 0.75,
          maxZoom: 50,
          zoomScaleSensitivity: 0.25,
          dblClickZoomEnabled: true
      });
  };
  </code></pre>
  
  <p>I tried a few logs to see what's happening :
  You can see them more in detail at this git issue : <a href="https://github.com/ariutta/svg-pan-zoom/issues/109" rel="nofollow noreferrer">https://github.com/ariutta/svg-pan-zoom/issues/109</a></p>
  
  <p>From what I understand, this.options.svg is displayed as a SVG element in Firefox while it is showed as a html element in Chrome.</p>
  
  <p>Additionnally to those posted, I also tried :</p>
  
  <pre><code>var x = document.getElementsByTagName("object");
  
      console.log(x[0]);
      var safeCTM = this.options.svg.createSVGMatrix()
  </code></pre>
  
  <p>which gives on firefox :</p>
  
  <pre><code> &lt;object id="svgElement" data="../SVG/en/A_Glo_AF.svg" type="image/svg+xml" style="width: 1440px; height: 900px;"&gt;
  </code></pre>
  
  <p>While on chrome the result is :
  <img src="https://i.stack.imgur.com/UIn0p.png" alt="console log for Chrome"></p>
  
  <p>I can't figure out why this is happening, and why only with Chrome.</p>
  
  <p>There is a lite example there : <a href="http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview" rel="nofollow noreferrer">http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview</a></p>
  
  <p>(You can change svg using the menu by moving the mouse on the left edge, another issue I have is that I need to click twice in order to change it properly)</p>
  
  <p>Another weird thing about all this is : online via Plunker, it also works on Chrome. But locally, after downloading the zip, it doesnt.</p>