2

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

1 ответ 1

3

Есть наверное и другие способы вёрстки, чтобы ваши элементы 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.