1

我使用 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>
4

1 回答 1

0

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

只有在您的 SVG 内容被加载后，您才需要初始化 svgPanZoom。使用动态 SVG检查此示例，了解如何做到这一点。但基本上在初始化 svgPanZoom 之前，您必须检查您的 SVG 是否已加载，如果没有，则侦听加载事件。

于 2016-06-30T21:19:13.293 回答