如何从旋转/缩放中获取 SVG 转换矩阵值


how to get SVG transform Matrix values from rotate/scale

>本质上,我正在寻找一个PHP函数或方程式,它将输出SVG转换中使用的矩阵值。

我上上下下地打猎,不幸的是一无所获。

我很清楚 rotate() 和 scale 函数(),但这些不是我需要的。

我需要能够获取以度为单位的旋转角度以及 x/y 刻度数据,并以 SVG 转换格式矩阵(a,b,c,d,e,f)输出一系列值

理想情况下,我想在PHP中执行此操作,但如前所述,标准数学方程也会有所帮助。

希望有人能为我指出正确的方向。

您可以通过将

单个转换的矩阵相乘来计算值。查看 SVG 规范以查找其定义:

rot(a)       := matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)
scale(sx,sy) := matrix(sx, 0, 0, sy, 0, 0)

根据应用转换的顺序(缩放前的旋转与旋转前的缩放),您可以获得不同的矩阵:

rot(a)*scale(sx,sy) = matrix(sx*cos(a), sx*sin(a), -sy*sin(a), sy*cos(a), 0, 0)
scale(sx,sy)*rot(a) = matrix(sx*cos(a), sy*sin(a), -sx*sin(a), sy*cos(a), 0, 0)
function selectElement(evt) {
        selectedElement = evt.target;
        currentX = evt.clientX;
        currentY = evt.clientY;
        currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7, -1).split(' ');
        alert(currentMatrix );
    }`<svg><rect class="draggable" x="30" y="30" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 0 0)"
        onmousedown="selectElement(evt)"</svg> />`