0

Есть карта страны в виде SVG. Я размещаю ее внутри блока размером 500х400 пикселей, вот так:

<div class="map"><svg>...</svg></div>

Проблема в том, что сама карта 800х700 пикселей, и мне нужно чтобы она и оставалась такого размера, а внутри .map появлялась горизонтальная и вертикальная прокрутка. Также нужно чтобы центр этой карты по умолчанию находился в центре обертывающего блока .map

Научите пожалуйста, как это сделать? Возможно, нужен какой-то js? Подскажите куда копать?

1 ответ 1

1

Как-то так

* {
  box-sizing: border-box;
}

.block {
  border: 10px solid black;
  padding: 30px;
  overflow: auto;
  max-width: 90vw;
  max-height: 90vh;
}

.block__svg {
  display: block;
  margin: 0 auto;
  width: 2000px;
  height: 2000px;
}
<div class="block">
  <svg class="block__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" stroke="black">
    <path d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0" fill="#ffcb5a"/>
    <path d="m437.023438 437.023438c-99.808594 99.808593-262.222657 99.808593-362.03125 0-99.808594-99.808594-99.808594-262.222657 0-362.03125zm0 0" fill="#fba61f"/>
    <path d="m256 176h64v-32h-48v-48h-32v50.273438c-27.519531 7.152343-48 32-48 61.726562 0 35.296875 28.703125 64 64 64 17.648438 0 32 14.351562 32 32s-14.351562 32-32 32h-64v32h48v48h32v-50.273438c27.519531-7.152343 48-32 48-61.726562 0-35.296875-28.703125-64-64-64-17.648438 0-32-14.351562-32-32s14.351562-32 32-32zm0 0" fill="#fff"/>
  </svg>
</div>

2
  • Я может не смог понятно объяснить... SVG больше, чем родительский div. В этом заморочка. 10 июл 2021 в 11:54
  • @Александр обновил ответ 11 июл 2021 в 6:35

Ваш ответ

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

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