将SVG元素放在图像上

Question

是否可以使用以下元素并对其进行样式设置,以便SVG对象出现在图像上(即图像的一部分)？

目前,它们显示在新行下方.

我知道我可以将图像设置为父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>

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="http://placehold.it/400x400/fc0">
  <svg viewBox="0 0 200 200">
    <circle cx="75" cy="75" r="50" fill="rebeccapurple"/>
  </svg>

</div>

由于您提到旋转(可能与您的意图不同),因此添加了一个旋转乐趣.