将SVG元素放置在图像上 [英] Position SVG elements over an image

问题描述

是否可以使用以下元素并对它们进行样式设置，以便SVG对象显示在图像上（即，像图像的一部分）？

我知道我可以将图片设置为一个图片父母div的背景图像，但不幸的是我也需要能够在父母内部旋转它，所以我不认为这是一个选项。

 < div id ='edit-area'style ='position：relative;溢出：无;显示：内联块;边框：1px黑色实心;宽度：950px; height：500px;'> 
< img src ='/ my_image.png'/> 
< svg id =edit-svgheight =500width =950> 
 <！ - 这里会有线条，矩形等 - > 
< / svg> 
< / div> 
  

解决方案

下面是一个如何进行图片叠加的通用示例。基本上你会将图像和覆盖内容包裹在一个相对定位的元素中，然后绝对放置覆盖内容。

  .img-overlay-wrap {position：relative;显示：inline-block; / * <=将容器缩小为图像大小* / transition：转换150ms缓出;}。img-overlay-wrap img {/ *< =可选，用于响应* / display：block;最大宽度：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 =75cy =75r =50fill =rebeccapurple/> < / svg>< / div>  

-o旋转的乐趣，因为你提到了旋转（可能与你想要的不同）。

Is it possible to have the following elements and style them so that the SVG objects appear over the image (i.e. like part of the image)?

Currently they are displayed below it on a new row.

I know I could set the image as a background image of the parent div, but unfortunately I also need to be able to rotate it within the parent so I don't think that is an option.

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

解决方案

Here's a generic example of how to do an image overlay. Basically you wrap the image and the overlay content in a relative positioned element and then absolute position the overlay content.

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

Added a bit-o rotation fun since you mentioned rotation (might be different than what you intended).

这篇关于将SVG元素放置在图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！