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

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>