html - 为什么浏览器调整大小时svg路径会移动？

Question

我的代码

<div class="map ">
    <svg viewBox="0 0 1378 446" >
        <a href="#" onclick="openReserv(1)">
            <path class="part" d="m 352.16105,321.51686 -4.20122,20.51183 15.32209,3.2127 3.70696,-20.2647 z"
                                   fill="#4ddb73"  data-place-number="1" />
        </a>
        <a href="#" onclick="openReserv(2)">
            <path class="part" d="m 366.98888,324.97669 14.66009,2.93736 -3.58233,20.18336 -14.78472,-2.85602 z"
                                  fill="#4ddb73" data-place-number="2" />
        </a>
    </svg>
    <img src="~/img/floor14.png" alt="" class="im">
</div>

---

body {
}
.map{
    position: relative;
    text-align: center;
}
svg{
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}
.part{
    opacity: .5;
}
.part:hover{
    transition: opacity .1s ease;
    opacity: .5;
    cursor: pointer;
}

当浏览器完全打开时，一切都很好。当我水平缩小浏览器时，我的矩形滑出

为了在页面上定位元素，我使用bootstrap库，即Bootstrap grid. 调整浏览器大小时，如何使我的部件保持原位？

标签： htmlsvg

Answer 1

将此 CSS 添加到 SVG

svg.banner { width: 100%; height: auto; }