Как масштабировать svg при прокрутке колесика мвши?

Question

[Obivankinobi]

Добрый день!
Пытаюсь сделать масштабирование svg карты с помощью колесика мыши. Само масштабирование получилось, но оно идет от верхнего левого угла карты, а нужно сделать чтобы приближало ту позицию в которой находится указатель.
Вот пример кода. Кто может подсказать в какую сторону смотреть или уже готовое решение?

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

[Mr Crabbz]

htmlbook.ru/css/transform-origin

Answer 2

[Дмитрий Макаров]

Не являюсь сильным специалистом в svg, но основной подход такой:
смещаем все так, чтобы мышка оказалась в начале координат,
затем масштабируем,
затем перемещаем обратно.

Для этого нужно рассчитать матрицу преобразования, которая будет представлять из себя матричное произведение трех матриц: матрица переноса на (-Xмыши,-Yмыши), матрица масштабирования на scale, матрица переноса на (Xмыши, Yмыши).

Подобное реализовывал на 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));
        }

То есть у меня есть матрица transform, в которой содержится с каким смещением и каким масштабом отрисована картинка. При вращении колесика мыши мы эту матрицу модифицируем и все перерисовываем.
P.S. Очень важен порядок перемножения матриц.