SVG-Pan-ZoomインスタンスがTabbingコンポーネントに組み込まれています。アクティブなタブが変更されると、前のタブはdisplay: noneで非表示になります。最初のタブ（display: blockで再び表示される）に戻った後、svgPanZoomインスタンスは使用不可能な状態になります。私は実際に何が起こっているのか分からない。SVG-PanZoomはコンテナが隠れても機能しません
Google Chromeでのみこの現象を再現できました。
私はこれをテストする例を作成しました：http://svgpan-example.bitballoon.com/
は、これはバグ、または私は何かが足りないのですか？
ブラウザ固有の実装のようです。 要素（またはその親コンテナ）にdisplay: noneを設定すると、ブラウザはおそらくリソースをアンロードします。 display: noneを削除した後、ブラウザがリソースを再初期化/再読み込みしているように見えます。あなたは2つの事実に基づいたものを見ることができます：あなたは（インスペクタ）SVGの内部要素を変更する場合は、あなたが要素
SVG-パン・ズームは、外界からSVGの変更を管理していないので、それは問題ではありません。解決策は、インラインSVGを使用することです（隠れている/表示しているときに私のために働いた）、または他のすべてのオプション（オブジェクトとimgタグ）をテストするだけです。しかし、常にインラインSVGが望ましい方法です。
display：hiddenを持つオブジェクトはDOMのフローから削除されるため、現時点では一部のブラウザには次元データ（幅、高さ）がありません。私の解決策は少しばかげているかもしれませんが...私はブートストラップ方式でSVGが必要でした。だから私はモーダルの外側の体の底にsvg要素を置いて、visibility：hiddenを設定します。その後、svgPanZoomを初期化しました。その後、jQueryを使って隠しモーダルに移動しました。これは私の問題を解決しました。
<div id="svgContainer" style="width: 400px; height: 400px;
border:1px solid black; padding:5px; overflow:hidden;
visibility: hidden"><svg>...</svg></div>