画像とオーバーレイを同時にパン/ズームする方法は？

Question

私はjquery.panzoomを使用して、マウスまたはタッチイベントに応じて画像をパンしたりズームしたりしています。これは正常に動作しますが、オーバーレイ（SVGファイルまたは別の画像のいずれか）とともに画像を拡大したいと考えています。オーバーレイとイメージはまったく同じサイズですが、パンとズームに関して単一のイメージとして動作するようにしたいだけです。

私はこのように、両方のdivにそれらを入れてみました：

<div id="mydiv"> 
    <img src="image.jpg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;"> 
    <img src="overlay.svg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;"> 
</div> 

<script> 
    $("#mydiv").panzoom(); 
</script> 

私はそれを行う際にレイアウトがめちゃくちゃます。

画像とオーバーレイ（または複数の画像）を同時にパン/ズームするにはどうすればよいですか？

（それは私のターゲットプラットフォーム上で非常にうまく動作しているようですので、私はjquery.panzoomを使用して維持したいと思いますが、また仕事ができること同じことを別のライブラリがある場合）

Answer 1

そのdocumentationによると、これはうまくいくはずです：

(function() { 
    var $section = $('#collectionId'); 
    $section.find('.panzoom').panzoom({ 
    $set: $section.find('.parent > div') 
    }); 
})(); 

<section id="collectionId"> 
    <div class="parent"> 
    <div class="panzoom"> 
     <img src="image.jpg"> 
    </div> 
    <div> 
     <img src="overlay.svg"> 
    </div> 
    <div> 
     <img src="anotherOverlay.svg"> 
    </div> 
    </div> 
</section>