主页 / 问题 / 1167780
Accepted
gregor
Asked:2020-08-19 15:11:48 +0000 UTC2020-08-19 15:11:48 +0000 UTC

SVG 路径元素在浏览器调整大小时改变它们的位置

  • 772

这是我的svg代码

<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. 调整浏览器大小时如何保持我的位置 part？

html

1 个回答

  1. Best Answer

    可能还有其他布局方式，以便您的 SVG 元素class="part"和使用标签添加的图像<img>在调整浏览器窗口大小时保持它们的相对位置。

    但我可以提供一个 100% 解决这个问题的解决方案，响应速度快，并且在包括 IE11 和 Edge 在内的所有现代浏览器中都能正常工作。

    需要使用标签将图像添加到 SVG 中<image>

     <image  xlink:href="https://isstatic.askoverflow.dev/KIIEk.png" width="100%" height="100%"  class="im" />

    由于现在位图和 SVG 元素在同一个可缩放区域中，当浏览器窗口调整大小时，它们将以相同的 aspectRatio 调整大小，从而保证它们的相对位置不变。

    body {
}
.map{
    width:100vw;
    height:auto;
}
svg{
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}
.part{
    opacity: .5;
}
.part:hover{
    transition: opacity .1s ease;
    opacity: .5;
    cursor: pointer;
}
    <div class="map">
 
   <svg viewBox="0 0 1378 446" style="border:1px solid red;" > 
    <image  xlink:href="https://isstatic.askoverflow.dev/KIIEk.png" width="100%" height="100%"  class="im" />  
        <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="#EC8DA2" data-place-number="2" />
        </a> 
    </svg>
</div>

    • 3

相关问题