背景画像はSVGでズーム/パンしない

Question

私はSVGと背景画像を持っています。私はSVGをズームインしたりズームアウトしようとしています。私はズームとパンが動作するようにすることができますが、私の背景イメージはそれに従わないでしょう。同様に、私は左右にパンすることができます、そして、私が上下にパンするとき、背景イメージは続きます。

私はこれにライブラリを使用できません。 svg-pan-zoom。このための実際のアプリケーションはタッチスクリーンで行われ、onclickイベントは異なるSVGにリンクされたtouchstartイベントに変わります。しかし、私の質問のために、私はボタンで簡単にしてきました。

また、SVGファイルサイズを増やすため、私の背景イメージにCSSを追加し、SVGにインラインではないことをお勧めします。

パンニングを可能にするために同じサイズを維持するには、divも必要です。

確かにSVGと背景画像の両方を同じように拡大縮小する方法はありますか？

ここは私のJSFiddleです。 （このスクリプトはJSfiddleでは動作していないようですが、サーバーで実行すると動作します）。

Answer 1

SVGファイルのサイズが大きくなるため、私の背景イメージにCSSを追加し、SVGをインライン化したくない場合もあります。

これは正確ではありません。あなたのSVGの<image>で背景イメージをリンクすると、CSS willを使用するよりもSVGのサイズが増えません。

さらに、余分な作業をすることなく、残りのSVGと共に移動して拡大縮小します。