How to zoom in on center of svg zoom box that is in view

Hello i am trying to add zooming in my svg what i am trying to do is to zoom on center of the box that is currently visible on screen. i need that because their is panning so if someone drag. the box and it is only half in view so then i had to zoom on the center part of the box that is in view. i have provided the codePen please check it out

Codepen Link

const panBox = document.querySelector(".pan-box");
const zoomBox = document.querySelector(".zoom-box");

const dot = document.querySelector("#dot");
const table = document.querySelector("#table");
const tableGroup = document.querySelectorAll(".round-table");

const addDragAndPanning = Draggable.create(".round-table, .pan-box", {
  onPress: function (e) {
    e.stopPropagation();
  }
});

let radius = gsap.getProperty(table, "r");
const changeCircleSize = Draggable.create(dot, {
  type: "y",
  onDragStart: function () {
    dragCircle[0].disable();
  },
  onDrag: function () {
    table.setAttribute(
      "r",
      gsap.utils.clamp(20, Infinity, Math.abs(radius - this.y))
    );
  },
  onDragEnd: function () {
    dragCircle[0].enable();
  }
});

/* ------------------ ZOOM ----------------- */

window.addEventListener("wheel", onWheel);
let zoom = 1;
function onWheel(event) {

  /* --------------------- Responsible for Zoom in and out -------------------- */
  let delta = event.wheelDelta;
  if (delta > 0) {
    svgBox.style.transform =
      zoom >= 0.08 ? `scale(${(zoom -= 0.02)})` : `scale(${zoom})`;
  } else {
    svgBox.style.transform =
      zoom < 1.3 ? `scale(${(zoom += 0.02)})` : `scale(${zoom})`;
  }

  event.preventDefault();
}

Here are the Explaining images

I tried different ways searched on stackoverflow but can't make it. Most of the answers were on image but i am trying this in svg. Please help me solve this.

The way to think about what you need to do is to follow these three steps when you zoom.

1. Translate the SVG so that the SVG coordinates, that are where your pointer is, are now at the origin (0,0)
2. Scale the SVG by your zoom ratio
3. Translate the SVG back in the opposite direction to the pointer position.
   But remember that the translate distance will now be different because the SVG has been scaled. So you'll need to divide the translate coords by the amount you just zoomed.

You may have a few problems because you are using a third-party library for your panning, and your own code for the zoom.

But I hope this helps you get there.