动画响应Svg-Map

Question

首先：圣诞快乐！

我正在尝试做一个响应式的可点击地图。我没能保持svg图像的位置稳定，请参见此处：http://wp12730465.server-he.de/heim/

我不知道如何解决这个问题。正如您所看到的，覆盖图像会在窗口缩放时跳转并丢失它们应该具有的位置。

有什么想法吗？ 最好， 安卡

Answer 1

如果我理解你的问题。我已将gelaende div更改为相对位置。

.gelaende {
        position: relative;
        width: 100%;
        float: left;
 }

Answer 2

圣诞快乐:) 最好的方法是将[position：“relative”]给予父div，你的是这个（.section）：

<div class="section">
<div id="responsiveTabs" class="r-tabs">
<ul id="tabs" class="r-tabs-nav"> 

...

＆安培;还要为要在其上方使用的每个图像定义[position：“absolute”]。 下图是一个很好的例子：

#heim {
 width: 14vw;
 position: absolute;
 height: auto;
 top: 12vw;
 left: 0;
}

正如您所注意到的，每个图像都需要更改顶部和左侧位置。