How to achieve correct scaling of SVG when scrolling?

Question

JavaScript

Good day!
I need to make sure that the picture diverges from the mouse cursor when scrolling and scales, but this doesn’t happen for me, in most cases it blends, then down then to the right, it all depends on the SVG that I am currently scaling and how it fits into the screen .
as I did:
var svgBounds = _getSvgBounds();
var point = _svg[0].createSVGPoint();
point.x = (mousePosition.x - svgBounds.left) * _pixelRate;
point.y = (mousePosition.y - svgBounds.top) * _pixelRate;
var rootMatrix = _svg[0].createSVGMatrix();
rootMatrix.a = _scale.x;
rootMatrix.b = 0;
rootMatrix.c = 0; rootMatrix.f = _translate.y;
rootMatrix.d = _scale.y;
rootMatrix.e = _translate.x;
var compute = _svg[0].createSVGMatrix().translate(point.x, point.y).scale(zoom).translate(-point.x, -point.y);
var result = rootMatrix.multiply(compute);
_translate.x = result.e;
_translate.y = result.f;
_scale.x = result.a;
_scale.y = result.d;
then applying transformations, no problem with it
_pixelRate - calculated during zoom initialization, the ratio of the actual width of the SVG to the width with which the SVG fit into the screen.
_svg[0] - the SVG itself is 1 on my page and is in the
svgBounds container - needed, because the SVG is in a container, which is somehow positioned somewhere,
_translate, _scale - current translate values ​​at the topmost group container in SVG
found, they say rootMatrix should be considered as getScreetCTM () at the topmost group container in SVG, only I also multiplied a,d,e,f by _pixelRate and got almost my _translate and _scale
and they say the transformation is considered differently
compute = _svg[0].createSVGMatrix().translate(-point.x*(zoom-1), -point.y*(zoom-1)).scale(zoom);
but none of this gave good results, the most honest scaling is obtained when the original version of the calculations that I wrote at the beginning is used