Анимированные отзывчивые Svg-Map

Question

прежде всего: С Рождеством!

Я пытаюсь сделать интерактивную карту, которая является отзывчивой. Я не могу сохранить положения изображений svg стабильными, см. Здесь: http://wp12730465.server-he.de/heim/

Я понятия не имею, как это решить. Как вы можете видеть, оверлейные изображения прыгают и теряют свое положение, которое они должны иметь при масштабировании окна.

Любые идеи? Best, Anka

Answer 1

Если я правильно понял ваш вопрос. Я внес изменения в gelaende div с положением родственника.

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

Answer 2

С Рождеством тоже :) Лучший способ сделать это дает [позицию: "относительный"] на родительский DIV, который в вашем является это один (.section):

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

. ..

& также определяют [положение: «абсолютное»] для каждого изображения, которое вы хотите использовать в верхней части этого. Ниже изображения хороший пример:

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

Как вы уже заметили, сверху и необходимо изменить для каждого отдельного изображения, оставленные позиции.