在图像上定位SVG元素

Question

是否可以同时拥有以下元素并使SVG对象覆盖在图像上方（即像是图像的一部分）？

目前它们被显示在图像下方的新行中。

我知道我可以将图像设置为父div的背景图像，但不幸的是，我也需要在父div内旋转它，所以我认为那不是一个选择。

<div id='edit-area' style='position:relative; overflow:none; display:inline-block; border: 1px black solid; width: 950px; height: 500px;'>
    <img src='/my_image.png' />
    <svg id="edit-svg" height="500" width="950">
        <!-- there will be lines, rectangles etc in here -->
    </svg>
</div>

- CompanyDroneFromSector7G

---

这听起来像是标准的图像叠加，有很多答案。 - hungerstar

感谢您的搜索，我现在开始翻译。 - CompanyDroneFromSector7G

保持<div>的position: relative。将<img>和<svg>设置为position: absolute。 - Paul LeBeau

我建议不要将具有叠加层position: absolute;（在这种情况下为<img>）的内容制作出来。 - hungerstar

Answer 1

以下是如何进行图像叠加的通用示例。基本上，您需要将图像和叠加内容放在相对定位的元素中，然后绝对定位叠加内容。

.img-overlay-wrap {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
   display: block;
   max-width: 100%;
   height: auto;
}

.img-overlay-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
}

.img-overlay-wrap:hover {
  transform: rotate( 15deg );
}

<div class="img-overlay-wrap">

  <img src="https://via.placeholder.com/400">
  <svg viewBox="0 0 200 200">
    <circle cx="75" cy="75" r="50" fill="rebeccapurple"/>
  </svg>

</div>

由于您提到了旋转，因此我增加了一些旋转的乐趣（可能与您的意图不同）。

->

由于提到了旋转，我增加了一些有趣的旋转效果（可能与您的本意不同）。

- hungerstar