Q: How to get SVG container to scroll when scaling it up with transform? I am using an SVG to load a background image and enabling the user to draw some shapes an upload this new image.
I have a problem, when I rescale the SVG it starts overflowing from its parent container and I can't get the scroll bars to track the area properly.
I am using the library svgdotjs to help out with the SVG creation.
To illustrate my issue:


const url = "https://d32qe1r3a676y7.cloudfront.net/eyJidWNrZXQiOiJibG9nLWVjb3RyZWUiLCJrZXkiOiAiYmxvZy8wMDAxLzAxL2FkNDZkYmI0NDdjZDBlOWE2YWVlY2Q2NGNjMmJkMzMyYjBjYmNiNzkuanBlZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6IDkwMCwiaGVpZ2h0IjowLCJmaXQiOiJjb3ZlciJ9fX0=";
const container = document.getElementById("container");
const svg = SVG().addTo(container);
const backgroundImage = svg.image(url, (event) => {
      const imageOriginalWidth = event.target.naturalWidth;
      const imageOriginalHeight = event.target.naturalHeight;
      const xFactor = Math.round(container.parentElement.offsetWidth / imageOriginalWidth * 0.96 * 1000) / 1000;
      const yFactor = Math.round(container.parentElement.offsetHeight / imageOriginalHeight * 0.96 * 1000) / 1000;
      const resizeFactor = Math.min(xFactor, yFactor);
      svg.size(imageOriginalWidth * resizeFactor, imageOriginalHeight * resizeFactor);
      backgroundImage.size(imageOriginalWidth * resizeFactor, imageOriginalHeight * resizeFactor);
    });
document.getElementById("zoomIn").addEventListener("click", () => {
  svg.scale(1.1, 0, 0);
});
document.getElementById("zoomOut").addEventListener("click", () => {
  svg.scale(0.9, 0, 0);
});
body {
  width: 100%;
  height: 100%;
}
.card-body {
  height: 80%;
  width: 80%;
  border: solid 1px red;
}
#container {
  display: block;
  overflow: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js" integrity="sha512-I+rKw3hArzZIHzrkdELbKqrXfkSvw/h0lW/GgB8FThaBVz2e5ZUlSW8kY8v3q6wq37eybIwyufkEZxe4qSlGcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="card-body">
  <div id="container">
  
  </div>
</div>
<div>
  <button id="zoomIn">
  ZoomIn
  </button>
  <button id="zoomOut">
  ZoomOut
  </button>
</div>


If you click on zoomIn the SVG is going to scale up but the scrollbar is not going to track the overflow properly.
Thank you for your help.
