如何同时平移/缩放图像和叠加层？

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

根据他们的文档 ，这应该起作用：

(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>