如何同时平移/缩放图像和覆盖？

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>