将 SVG 元素定位在图像上答案

【问题标题】：Position SVG elements over an image将 SVG 元素定位在图像上
【发布时间】：2021-04-04 03:33:35
【问题描述】：

是否可以有以下元素并设置它们的样式，以便 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>

【问题讨论】：

这听起来像是标准的图像叠加，其中有很多答案。
感谢现在搜索
保留<div> 和position: relative。将<img> 和<svg> 设置为position: absolute。
我建议不要制作将覆盖position: absolute;（在本例中为<img>）的内容。

标签： html css svg

【解决方案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>

添加了一点旋转的乐趣，因为您提到了旋转（可能与您的预期不同）。

【讨论】：