SVG обрезается при масштабе

Question

SVG при transform: scale(2) увеличивается относительно центра но область слева и сверху обрезается.

Я понимаю, что так работает scale. В общем, необходимо, как-то сохранить размер svg.

Изображение на всю страницу, делаю зум (принцип google карт).

.map
	height: 100vh
	width: 100vw
	overflow-x: scroll
	overflow-y: scroll

.map__svg
	background-image: url(../assets/svg/Back.jpg)
	display: flex
	height: 100%
	width: 100%
	object-fit: cover
	transform-origin: center
	transition: all 2s
	
	&:hover
		transform: scale(2)

<div class="map">
  <object 
    data="../assets/svg/Map_2.svg" 
    type="image/svg+xml"
    class="map__svg" 
  >
  </object>
</div>

<svg 
	version="1.1" 
	id="Layer_1" 
	xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink" 
	x="0px" 
	y="0px"
	width="100%"
	height="100%"
	viewBox="0 0 4090 2080"
	xml:space="preserve"
>

<g>
	<path class="st0" d="M1580.5,1129.5h-1c6.5,7.2,15.8,10.8,27.9,10.8c12.1,0,22.2-5.1,30.2-15.3s12.1-22.8,12.1-37.7
		c0-1.5,0-2.6-0.1-3.3c-5.8,6.2-12.3,9.2-19.3,9.2c-4,0-10-0.8-18.1-2.3c-8-1.6-13.9-2.3-17.7-2.3s-7.6,1.2-11.5,3.5l-0.1-1.8
		c2-2,5-3.8,8.9-5.4c4-1.7,7.7-2.5,11.3-2.5c3.6,0,9.5,0.8,17.7,2.3c8.3,1.6,14.1,2.3,17.7,2.3s7.2-1.6,11.1-4.8
		c-1-13.2-5.2-23.9-12.7-32.1c-7.5-8.3-17.1-12.4-28.9-12.4c-13.9,0-24.2,7.7-31,23.2h-0.7v-19.9c3-1.4,7.9-2.7,14.7-4
		c6.8-1.3,12.8-1.9,18-1.9c14.4,0,26.6,4.7,36.7,14.2c10,9.5,15,22.1,15,38s-5.1,29.1-15.4,39.8c-10.3,10.7-23.3,16-39,15.9
		c-8.2,0-16-2.1-23.4-6.4s-11-9.4-11-15.5c0-2.3,0.9-4.3,2.6-6c1.7-1.7,3.7-2.6,6.1-2.6s4.3,0.9,6,2.6c1.7,1.7,2.5,3.7,2.5,6
		c0,2.3-0.8,4.3-2.5,6C1584.9,1128.6,1582.9,1129.5,1580.5,1129.5z"/>

</g>

</svg>

Внутри SVG еще очень много элементов...

Сделал увеличение при наведении

Answer 1

оно?

.block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
  cursor: pointer;
}

.block:hover {
  transform: translate(-50%, -50%) scale(2);
}

<div class="block">
  <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M1 10L0.262846 9.32428C-0.087615 9.7066 -0.087615 10.2934 0.262846 10.6757L1 10ZM9.98715 18.3243L1.73715 9.32428L0.262846 10.6757L8.51285 19.6757L9.98715 18.3243ZM1.73715 10.6757L9.98715 1.67572L8.51285 0.324276L0.262846 9.32428L1.73715 10.6757Z"
                            fill="#343434" />
                        <path d="M2 10H22.5" stroke="#343434" stroke-width="2" />
                    </svg>
</div>

Answer 2

Я убрал из шапки SVG width, height, viewBox их оптимальные размеры установит Javascript
Чтобы расположить карту по центру окна браузера и чтобы она занимала весь экран необходимо воспользоваться getBBox() Javascript

После клика width, height SVG увеличатся в два раза, заставляя тем самым, увеличить размер карты в два раза.

// Вычисление габаритных размеров карты

var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
svg.setAttribute("width", bbox.width + "px"); 
svg.setAttribute("height", bbox.height + "px");
   // Установка оптимального размера viewBox
svg.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);

var  zoomed = false;
svg.addEventListener("click", function(e) {
if (zoomed) 
  // Увеличение размеров карты в два раза после клика по карте
{
svg.setAttribute("width", bbox.width * 2 + "px");
svg.setAttribute("height", bbox.height * 2 + "px"); 
 zoomed = false; 
}
 //  Уменьшение размера карты после повторного клика
else
   {
     svg.setAttribute("width", bbox.width + "px");
    svg.setAttribute("height", bbox.height + "px"); 
     zoomed = true;
   }

});

Полный вариант кода

БЛОГ НА HUSL

SVG обрезается при масштабе

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