createSVGMatrix 不是函数：SVG 在 Firefox 上加载但在 Chrome 上不加载

Question

使用 svgpanzoom、angularjs 和 jquery 我正在构建一个 SPA，旨在查看不同的 SVG。它适用于 firefox（除了一些其他问题）但不适用于 chrome.

在我的 html 我有这个 :

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

在我的控制器文件中，我在控制器之外：

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

};

在我的控制器中：

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

我尝试了一些日志来查看发生了什么：您可以在这个 git 问题上更详细地看到它们：https://github.com/ariutta/svg-pan-zoom/issues/109

据我了解，this.options.svg 在 Firefox 中显示为 SVG 元素，而在 Chrome 中显示为 html 元素。

除此之外，我也尝试过：

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

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

在 firefox 上给出：

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

在 chrome 上，结果是：

我不明白为什么会这样，为什么只有 Chrome。

那里有一个简单的例子：http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview

（您可以通过在左边缘移动鼠标来使用菜单更改 svg，我遇到的另一个问题是我需要单击两次才能正确更改它）

关于这一切的另一个奇怪的事情是：通过 Plunker 在线，它也适用于 Chrome。但是在本地，下载zip后，没有。

Answer 1

好的，问题来自 angularJS :

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

看起来 Chrome 不接受该对象，因为在页面加载时，我的 angular 变量尚未设置。我通过这样做解决了这个问题：

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

createSVGMatrix 不是函数：SVG 在 Firefox 上加载但在 Chrome 上不加载

createSVGMatrix is not a function : SVG loading on Firefox but not on Chrome

javascript

svg

cross-browser

angularjs

svgpanzoom