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

这是一个如何进行图像叠加的一般示例。基本上，您将图像和叠加内容包装在相对定位的元素中，然后绝对定位叠加内容。

＆＃13;

.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 );
}

＆＃13;

<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>

＆＃13;

因为你提到旋转（可能与你想要的不同），所以增加了一点旋转乐趣。

将SVG元素放在图像上

1 个答案: