Как реализовать масштабирование SVG по аналогии с картами?

Question

[Виктор Климов]

Имеем svg картинку на весь экран, как сделать чтобы по движению колесом мыши картинка увеличивалась или уменьшалась и позиционировалась относительно координат курсора ?

Увеличение по скроллу организовал , путём уменьшения 3 и 4 параметра viewBox у SVG, но увеличивается таким образом относительно координат (0,0) окна браузера.
Надо изменять 1 и 2 параметр viewBox.
Путём не хитрых расчётов вывел формула на на которую нужно сдвигать, но всё равно как то коряво работает

формула для сдвига по оси Х: widthSVG/viewBox[2] * x - x ;

где: viewBox[2] - 3-й пар-р viewBox svg
x - координата мыши по соот. оси

Полный код:

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]);

Решил, координатная сетка увеличивается пропорционально уменьшению вьюБокс, отсюда следуют что величину смещения нужно делить на величину приближения