Разместить svg внутри блока по центру

Question

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

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

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

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

Answer 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>

БЛОГ НА HUSL

Разместить svg внутри блока по центру

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