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.

4

1 回答 1

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>
于 2015-04-29T13:11:02.010 回答