svg-pan-zoomが動作しない100％時間

Question

私はsvg-pan-zoomライブラリ（https://github.com/ariutta/svg-pan-zoom）を使用しています。これはサイトのページ（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 

Libraryバージョン：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コンテンツが読み込まれた後でなければ、init svgPanZoomを起動する必要があります。どうすればいいか確認するにはthis example with dynamic SVGsをチェックしてください。しかし、基本的にsvgPanZoomを初期化する前にSVGがロードされているかどうかを確認しなければなりません。