SVG элементы Path меняют своё положение при изменении размеров браузера

Question

Вот мой код 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 ?

Answer 1

Есть наверное и другие способы вёрстки, чтобы ваши элементы SVG class="part" и картинка добавленная с помощью тега <img> сохраняли взаимное расположение при изменении размера окна браузера.

Но я могу предложить решение, которое на 100% решает эту проблему, адаптивно и работает одинаково во всех современных браузерах, включая IE11 и Edge.

Картинку нужно добавить внутрь SVG с помощью тега <image>

 <image  xlink:href="https://i.stack.imgur.com/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://i.stack.imgur.com/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>

БЛОГ НА HUSL

SVG элементы Path меняют своё положение при изменении размеров браузера

Ответы (1 шт):