覆盖svg根据img响应
覆盖svg根据img响应
提问于 2020-10-21 23:44:23
我必须把一个图标覆盖到图像上。图像的宽度和高度均为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;
}回答 3
Stack Overflow用户
发布于 2020-10-22 01:45:23
尝试使用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>
Stack Overflow用户
发布于 2020-10-21 23:54:22
你可以通过使用，单位为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>
Stack Overflow用户
发布于 2020-10-21 23:57:05
我所理解的是，图标必须是响应性的，它的高度和宽度应该随着屏幕宽度的减少而减少，而且它应该在图像的左上角。
如果是这种情况，则必须在每个断点上使用@media查询来更改left, top, width and height属性的图标大小和位置
此外，如果您保留object-fit: cover;，则图像有可能与屏幕的高度和宽度不同。所以有可能图标不在应该在的位置。
如果还有其他问题，请用codepen写一个例子，并再次更新问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64467184
复制相关文章
相似问题
腾讯云开发者
