Question

我使用的是svg-pan-zoom库（https://github.com/ariutta/svg-pan-zoom），它在我网站的页面上大约有75％的时间（在Chrome和Firefox中都有最新版本）。

因为我假设这是由于我的一些错误配置，我想知道我是否犯了错误，或者是否有特定的情况可能导致这种情况。

我的代码：

(function (mw, $) {

   $(document).ready(function () {

        panZoomInstance = svgPanZoom('#stylometricanalysis-svg1', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            minZoom: 0.1
        });

        panZoomInstance = svgPanZoom('#stylometricanalysis-svg2', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            minZoom: 0.1
        });

    });

}(mediaWiki, jQuery));

错误：

145 TypeError: this.options.svg.createSVGMatrix is not a function

图书馆版：3.2.9

<object class='stylometricanalysis-image' id='stylometricanalysis-svg1' type='image/svg+xml' data='/some/path/to/svg/file.svg'>Your browser does not support SVG files, and so your visualization cannot display</object>

<object class='stylometricanalysis-image' id='stylometricanalysis-svg2' type='image/svg+xml' data='/some/path/to/svg/file.svg'>Your browser does not support SVG files, and so your visualization cannot display</object>

Answer 1

您的SVG内容是动态加载的。这意味着当JS开始时有时候SVG内容可用，有时则不然。如果不是 - 你会得到错误。

只有在加载SVG内容后才需要初始化svgPanZoom。检查this example with dynamic SVGs以了解如何执行此操作。但基本上在初始化svgPanZoom之前，你必须检查你的SVG是否已加载，如果没有，则监听加载事件。

svg-pan-zoom 100％的时间没有工作

1 个答案: