Javascript Svg缩放鼠标拖动的旋转元素

我正在为一个我想从事的项目使用SVG和矩阵，我正在尝试用香草javascript实现一个自由转换。到目前为止，我能够使用javascript和这个库进行所有转换，以帮助我处理矩阵。 我的代码目前只处理rect元素，但我假设大部分代码都会用于其他元素，并进行一些更改

当我尝试缩放旋转的矩形时，问题就出现了。 在我的代码中，当我单击一个元素时，我给它一个围绕元素的路径，一些圆表示可以缩放矩形的方向，1表示中心，1表示旋转

正如我所说的，我对任何变换都没有任何问题，无论是平移旋转/缩放的形状还是其他任何东西，我唯一不知道如何做的是如何缩放旋转的形状以保持其旋转

如果一个矩形有0个旋转，根据我决定缩放的方向，我只需在基于鼠标指针获得新的宽度/高度后混合平移和缩放。这非常有效，并且符合预期。 如果一个矩形有旋转，这会中断，我想也许用我缩放的点和鼠标指针之间的欧几里德距离可以工作，但它没有。所以我有点迷路了

        const elem = document.getElementById('rect2');
        const x = elem.x.baseVal.value;
        const y = elem.y.baseVal.value;
        const width = elem.width.baseVal.value;
        const height = elem.height.baseVal.value;

        // this is a function that return the mouse coords on the canvas- 
        // svg
        const m = this.getCanvasMousePos(e);

        if(type === 'bottom-center'){
            const newH = (m.y - y) / height;
            const s = scale(1,newH);
            const form = toSVG(s);
            elem.setAttribute('transform', form);
        }else if (type === 'top-center'){
            const newH = (y+height - m.y) / height;
            const s = scale(1,newH);
            const t = translate(0,m.y-y)
            const comp = compose(t,s);
            const form = toSVG(comp);
            elem.setAttribute('transform', form);
        }else if (type === 'middle-left') {
            const newW = (x+width - m.x) / width;
            const s = scale(newW,1);
            const t = translate(m.x-x, 0);
            const comp = compose(t,s)
            const form = toSVG(comp);
            elem.setAttribute('transform', form);
        }else if (type === 'middle-right') {
            const newW = (m.x - x) / width;
            const s = scale(newW,1);
            const form = toSVG(s);
            elem.setAttribute('transform', form);
        }else if (type === 'bottom-right') {
            const newW = (m.x - x) / width;
            const newH = (m.y - y) / height;
            const s = scale(newW,newH);
            const form = toSVG(s);
            elem.setAttribute('transform', form);
        }else if (type === 'bottom-left'){
            const newW = ((x + width) - m.x) / width;
            const newH = (m.y - y) / height;
            const t = translate(m.x - x,0);
            const s = scale(newW,newH);
            const comp = compose(t,s)
            const form = toSVG(comp);
            elem.setAttribute('transform', form);
        }else if (type === 'top-left') {
            const newW = ((x + width) - m.x) / width;
            const newH = ((y + height) - m.y) / height;
            const t = translate(m.x-x,m.y-y);
            const s = scale(newW,newH);
            const comp = compose(t,s)
            const form = toSVG(comp);
            elem.setAttribute('transform', form);
        }else if (type === 'top-right') {
            const newW = (m.x - x) / width;
            const newH = ((y + height) - m.y) / height;
            const t = translate(0,m.y-y);
            const s = scale(newW,newH);
            const comp = compose(t,s)
            const form = toSVG(comp);
            elem.setAttribute('transform', form);
        };

这是非旋转SVG的代码

---

希望有人能帮忙，非常感谢

我找到了解决办法

无论何时旋转形状，都应该像不旋转一样平移鼠标指针和形状，然后正常进行缩放，最后向后平移并旋转。我的问题是，我试图在翻译回之前旋转

如果使用此方法，则顺序应为“变换”（旋转-平移-缩放），因为最后一个放置的是第一个发生的