How to implement SVG scaling similar to maps?

Question

JavaScript

We have a full-screen svg image, how to make the image increase or decrease by moving the mouse wheel and position it relative to the cursor coordinates?

The increase in scrolling was organized by reducing the 3rd and 4th parameters of the viewBox of the SVG, but it increases in this way relative to the coordinates (0,0) of the browser window.
It is necessary to change 1 and 2 parameters of the viewBox.
By not cunning calculations, I deduced the formula to which you need to shift, but still the

formula for shifting along the X axis works clumsily: widthSVG/viewBox[2] * x - x ;

where: viewBox[2] - 3rd param viewBox svg
x - mouse coordinate according to acc. axes

Full code:

var svgViewBoxWidth = 1910;	
    var svgViewBoxHeight = 970;		
    var test = 0;
    var theSvgElement = document.getElementById('main-svg');
        
var viewBox = theSvgElement.getAttribute('viewBox');	// Взял атрибут viewBox SVG.
var viewBoxValues = viewBox.split(' ');			        // Создал массив из атрибутов 

viewBoxValues[0] = parseFloat(viewBoxValues[0]);		
viewBoxValues[1] = parseFloat(viewBoxValues[1]);	
viewBoxValues[2] = parseFloat(viewBoxValues[2]);		
viewBoxValues[3] = parseFloat(viewBoxValues[3]);

document.onwheel = function(e) {
    e.preventDefault();
    
    var delta = e.deltaY || e.detail || e.wheelDelta;
    test -= delta;
    
    viewBoxValues[2] += delta;
    viewBoxValues[3] += (~~(delta / 1.96));		
    
    if (test < 0) {
      viewBoxValues[2] = svgViewBoxWidth;
      viewBoxValues[3] = svgViewBoxHeight;
      test = 0;
    }
    if ((test == 1500) || (test > 1500)) {
      test = 1500;
      viewBoxValues[2] = 410;
      viewBoxValues[3] = 205;
    }	

    xR = (svgViewBoxWidth/viewBoxValues[2])*e.pageX - e.pageX;
    yR = (svgViewBoxHeight/viewBoxValues[3])*e.pageY - e.pageY;	

    viewBoxValues[0] = xR.toFixed(2);
    viewBoxValues[1] = yR.toFixed(2);
    
    theSvgElement.setAttribute('viewBox', viewBoxValues[0] + " " + viewBoxValues[1] + " " + viewBoxValues[2] + " " + viewBoxValues[3]);
  };

Answer 1

xR = ((svgViewBoxWidth/viewBoxValues[2])*e.pageX - e.pageX)/(svgViewBoxWidth/viewBoxValues[2]);

I decided that the coordinate grid increases in proportion to the decrease in the viewBox, hence it follows that the offset value must be divided by the approximation value