JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red"/>
  </svg>
</div>
<br>
<button id="zoom">
ZoomIn
</button>

CSS

div{
  border:1px solid black;
  width:400px;
  height:400px;
  overflow:scroll;
}

svg{
    border:1px solid black;
}

JavaScript

var elementToScale = document.getElementById('svg');
var scale = 1;

document.getElementById('zoom').addEventListener('click', function(){
	scale += 0.1
	elementToScale.style.transform = "scale(" + scale + ")";
});