svg-pan-zoom не работает 100% времени

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 контент загружается динамически. Это означает, что иногда контент SVG доступен, когда JS включается, иногда нет. А когда это не так - вы получаете ошибки.

Вы должны инициировать svgPanZoom только после загрузки вашего SVG-контента. Проверьте этот пример с динамическими SVG, чтобы увидеть, как вы можете это сделать. Но в основном перед инициализацией svgPanZoom вы должны проверить, загружен ли ваш SVG, а если нет, то прослушать событие загрузки.