How to scale svg when mouse wheel is scrolled?

Question

JavaScript

Good afternoon!
I'm trying to scale an svg map using the mouse wheel. The scaling itself turned out, but it comes from the upper left corner of the map, but you need to make it closer to the position where the pointer is located.
Here is a sample code. Who can tell in which direction to look or a ready-made solution?

var csale = 1.189;
$('svg').mousewheel(function (event, delta){
    csale +=delta/100;
     $('#transform-wrapper').attr('transform', 'scale('+csale+' '+csale+')')
})

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2300" height="2300">
   <g id="transform-wrapper" transform="scale(1.189 1.189)">
   </g>
</svg>

Answer 1

htmlbook.ru/css/transform-origin

Answer 2

I am not a strong specialist in svg, but the basic approach is this:
we shift everything so that the mouse is at the origin,
then scale,
then move back.
To do this, you need to calculate the transformation matrix, which will be a matrix product of three matrices: the translation matrix by (-X mice, - Y mice), the scaling matrix by scale, the translation matrix by (X mice, Y mice).
Implemented something like this in c#:

protected override void OnMouseWheel(MouseEventArgs e)
        {
            if (isAllowTransfom)
            {
                var transform_local = transform.Clone();

                var matrixOrder = MatrixOrder.Append;
                var K = e.Delta > 0 ? SCALE_MUL : 1 / SCALE_MUL;

                transform_local.Multiply(new Matrix(1, 0, 0, 1, -e.Location.X, -e.Location.Y), matrixOrder);
                transform_local.Multiply(new Matrix(K, 0, 0, K, 0, 0), matrixOrder);
                transform_local.Multiply(new Matrix(1, 0, 0, 1, e.Location.X, e.Location.Y), matrixOrder);
                transform = transform_local;

                OnViewWindowChanged(transform);
            }

            base.OnMouseWheel(GetWorldMouseEventArgs(e));
        }

That is, I have a transform matrix, which contains what offset and what scale the picture is drawn with. When the mouse wheel is rotated, we modify this matrix and redraw everything.
PS The order of matrix multiplication is very important.