2

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 :

<object id="svgElement" type="image/svg+xml" data="../SVG/{{currentLanguage}}/{{currentCartography}}.svg">
    It seems your browser doesn't support SVG.
</object>

In my controller file I have outside of the controller :

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
});

};

Inside my controller :

$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
    });
};

I tried a few logs to see what's happening : You can see them more in detail at this git issue : https://github.com/ariutta/svg-pan-zoom/issues/109

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.

Additionnally to those posted, I also tried :

var x = document.getElementsByTagName("object");

    console.log(x[0]);
    var safeCTM = this.options.svg.createSVGMatrix()

which gives on firefox :

 <object id="svgElement" data="../SVG/en/A_Glo_AF.svg" type="image/svg+xml" style="width: 1440px; height: 900px;">

While on chrome the result is : console log for Chrome

I can't figure out why this is happening, and why only with Chrome.

There is a lite example there : http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview

(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)

Another weird thing about all this is : online via Plunker, it also works on Chrome. But locally, after downloading the zip, it doesnt.

Ellone
  • 3,644
  • 12
  • 40
  • 72
  • I think you need to clean up your question a bit. I am not seeing an "options.svg" being loaded, nor a "A_Glo_AF.svg". I am also seeing a bunch of errors related to scope.toggleBottomBar etc. It's hard to understand your question when nothing seems to match up. – Paul LeBeau Apr 29 '15 at 03:20
  • You will get the error "createSVGMatrix is not a function" if `this.svg`is null, or if it points to something that is not an `SVGSVGElement` object. Check that you are not trying to initialise something before it is loaded or the DOM is ready. – Paul LeBeau Apr 29 '15 at 03:25
  • `options.svg` is loaded in svg-pan-zoom (`init()` called from my controller via `changeSVG()` and `window.onload()`). A_Glo_AF has just been replaced by tiger. `toggleBottomBar()` was unecessary so I removed it, It is now out of the plunker. About `this.options.svg`, it is showed as SVG in FF, but as HTML in Chrome (from the logs I provided). Somehow : `element.contentDocument is null` (line 1714 of svg-pan-zoom.js). More likely the issue comes from the instantiation of svgpanzoom but I can't figure out what is going wrong, and why only on Chrome. – Ellone Apr 29 '15 at 09:12
  • Also, by doing `console.log("element.contentDocument : " + element.contentDocument);` in the `getSvg()` function (where the `element.contentDocument is null`error occurs), It gives : In Firefox : `element.contentDocument : [object SVGDocument]`. When it gives in Chrome : `element.contentDocument : [object HTMLDocument]` The fact that I need to click twice to change the SVG is also probably related to the issue. – Ellone Apr 29 '15 at 09:26

1 Answers1

1

Ok, so the issue came from angularJS :

<object id="svgElement" type="image/svg+xml" data="../SVG/{{currentLanguage}}/{{currentCartography}}.svg">
It seems your browser doesn't support SVG.
</object>

It looks like Chrome doesn't accept the object because at the page loading, my angular variable are not set yet. I resolved this by doing :

<object ng-show="currentCartography" id="svgElement" type="image/svg+xml" data="../SVG/{{currentLanguage}}/{{currentCartography}}.svg">
It seems your browser doesn't support SVG.
</object>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
Ellone
  • 3,644
  • 12
  • 40
  • 72