根据img覆盖svg响应

Question

我必须在图像上放置一个图标叠加层。图像的宽度和高度为 100%。图标是图像上的标记。图标位置根据图像响应而变化。我需要一直保持图标的相同位置。当图像响应时，图标也需要改变它的左上角宽度。

<div class="outer">
  <svg class="mark-icon"><svg>
  <img src="Map.jpg" class="map-bg"/>
</div>

.outer{
  position:relative;
}
.map-bg{
  width:100vw;
  height:100vh;
  object-fit:cover;
}
.mark-icon{
  width:50px;
  height:50px;
  position:absolute;
  left:50px;
  top:30px;
}

示例 https://jsfiddle.net/rkv3sd0q/

Answer 1

您可以使用vw 和vh 为单位动态放置您的图标，因为您的图像也是这样设置的，它将以相同的方式响应：

.mark-icon{
  position:absolute;
  left:5vw;
  top:5vh;
}

演示：

body{margin:0;}

.outer{
  position:relative;
}
.map-bg{
  width:100vw;
  height:100vh;
  object-fit:cover;
}
.mark-icon{
  width:50px;
  height:50px;
  position:absolute;
  left:5vw;
  top:5vh;
}

<div class="outer">
  <svg height="100" width="100" class="mark-icon">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg> 
  <img src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" class="map-bg">
</div>

Answer 2

我的理解是，图标必须是响应式的，它的高度和宽度应该随着屏幕宽度的减小而减小，也应该在图像的左上角。

如果是这种情况，那么您必须在每个断点上使用 @media 查询来更改 left, top, width and height 属性的图标大小和位置

另外，如果您保留object-fit: cover;，则可能图像的屏幕高度和宽度不同。因此，图标可能不在应有的位置。

如果还有什么问题，请在codepen中举个例子，然后再更新问题。

Answer 3

尝试使用 svg <image> 标签添加地图图像

添加带有<circle>的红色指针图标

当两个元素都在 SVG 中时，它们的相对位置将保持不变。 并且不会随着浏览器窗口大小的任何调整而改变。

body{
margin:0px;
padding: 0px;
    }
        
        
.outer-pane {
  width:100vw;
  height:100vh;
}
.pointer {
 fill:red;
 cursor:pointer;
}

<div class="outer-pane">
    <svg  viewBox="0 0 1000 739" preserveAspectRatio="xMin YMin meet" > 
       <image class="mainProject" xlink:href="https://www.mapsofworld.com/style_2019/images/world-map.png?v:1" width="1000" height="739" />
       <circle class="pointer" cx="320" cy="124" r="25" fill="red" />
    </svg>
    
</div>

更新

带有多个标记的地图

为此，请使用<symbol> 标签添加一次标记路径

 <symbol id="marker" width="18" height="28" viewbox="0 0 9.831 14.782">
         <path fill="#00AEEF" d="M9.831 4.916c0 2.714-3.538 8.487-4.913 9.867C3.437 13.307 0 7.631 0 4.916S2.201 0 4.916 0s4.915 2.201 4.915 4.916z"/>
    <circle cx="4.912" cy="4.916" r="2.932"  fill="#E7EDEF"/>
</symbol>

并使用<use>标签多次向地图添加标记

<use xlink:href="#marker" fill="#00AEEF" x="350" y="80" /> 
 <use xlink:href="#marker" fill="red" x="670" y="360" /> 

body{
    margin:0px;
    padding: 0px;
    }
        
        
.outer-pane{
  width:100vw;
height:100vh;
        }
.pointer {
 fill:red;
 cursor:pointer;
}
symbol path {
fill:inherit;
}       

<div class="outer-pane">
    <svg  viewBox="0 0 1000 739" preserveAspectRatio="xMin YMin meet" > 
       <symbol id="marker" width="18" height="28" viewbox="0 0 9.831 14.782">
         <path fill="#00AEEF" d="M9.831 4.916c0 2.714-3.538 8.487-4.913 9.867C3.437 13.307 0 7.631 0 4.916S2.201 0 4.916 0s4.915 2.201 4.915 4.916z"/>
    <circle cx="4.912" cy="4.916" r="2.932"  fill="#E7EDEF"/>
       </symbol>
       <image class="mainProject" xlink:href="https://www.mapsofworld.com/style_2019/images/world-map.png?v:1" width="1000" height="739" />
       
       <use xlink:href="#marker" fill="#00AEEF" x="350" y="80" /> 
        <use xlink:href="#marker" fill="red" x="670" y="360" /> 
         <use xlink:href="#marker" fill="violet" x="770" y="360" />
          <use xlink:href="#marker" fill="purple" x="170" y="210" /> 
           <use xlink:href="#marker" fill="crimson" x="190" y="310" />
    </svg>
    
</div>