SVG分组取消：将组矩阵变换合并至子元素的实现问题

现有一个包含2个及以上SVG元素的<g>分组，组和子元素都应用了SVG矩阵变换（包含旋转、倾斜、缩放等）。需要实现取消分组功能：移除<g>元素，将子元素移出分组，同时保留组和子元素的所有矩阵变换效果。尝试多种方法后都出现子元素位置错误或变换未正确复制的问题，现有代码仅对旋转有效，应用倾斜变换时效果异常。

示例SVG代码 #

<g transform="matrix(0.679039, -0.734102, 0.734102, 0.679039, -21.7964, 262.861)">
    <path transform="matrix(1, 0, 1.63636, 1, 82.9909, 49.1)" d="M92.35,45.6 A92.35,22.8 0 1 1 92.35016 45.6"></path>
    <rect width="225.1" height="63.3" transform="matrix(0.742794, -0.66952, 0.66952, 0.742794, 242.258, 216.595)" rx="0"></rect>
</g>

现有尝试代码 #

matrixMultiply(...matrices: DOMMatrix[]) : DOMMatrix {
    let args = arguments, i = args.length, m = args[i-1];

    while(i-- > 1) {
        let m1 = args[i-1] as Matrix;
        m = m1.multiply(m);
    }

    return m;
}

let groupMatrix = groupElement.transform.baseVal.getItem(0).matrix;
groupElement.childNodes.forEach(child => {
    let childTransform = (child as SVGGraphicsElement).transform.baseVal.getItem(0),
    childMatrix = childTransform.matrix,
    childInverseMatrix = childMatrix.inverse();
    let gm = matrixMultiply( childInverseMatrix, groupMatrix, childMatrix );

    childTransform.setMatrix(gm);
});

问题核心在于矩阵乘法顺序和变换叠加逻辑错误：SVG的变换是从右到左生效的，子元素先应用自身变换，再继承父组的变换，不需要额外的逆矩阵操作。

核心修正点 #

• 直接将组矩阵左乘子元素矩阵（对应数学上的组变换 × 子元素变换）
• 兼容子元素无初始变换的情况，避免报错
• 调整DOM操作顺序，保证元素迁移后结构正确

修正后的完整代码 #

// 实现从左到右的矩阵链式相乘（M1 × M2 × M3）
function matrixMultiply(...matrices: DOMMatrix[]): DOMMatrix {
    if (matrices.length === 0) return new DOMMatrix();
    return matrices.reduce((accMatrix, currMatrix) => accMatrix.multiply(currMatrix));
}

const groupMatrix = groupElement.transform.baseVal.getItem(0).matrix;
const parentContainer = groupElement.parentNode as SVGElement;

// 转成数组遍历，避免DOM结构变化影响遍历过程
Array.from(groupElement.childNodes).forEach(child => {
    if (!(child instanceof SVGGraphicsElement)) return;

    // 获取子元素的变换矩阵，无变换则用单位矩阵
    const childTransformList = child.transform.baseVal;
    const childMatrix = childTransformList.length > 0 
        ? childTransformList.getItem(0).matrix 
        : new DOMMatrix();

    // 计算最终变换矩阵：组变换先作用于子元素的原有变换
    const combinedMatrix = groupMatrix.multiply(childMatrix);

    // 重置子元素变换，应用新矩阵
    childTransformList.clear();
    childTransformList.appendItem(child.ownerSVGElement!.createSVGTransformFromMatrix(combinedMatrix));

    // 将子元素移到原分组的父节点下，保持原有顺序
    parentContainer.insertBefore(child, groupElement);
});

// 移除原分组元素
parentContainer.removeChild(groupElement);

关键逻辑说明 #

1. 矩阵乘法顺序：SVG中元素的最终变换是父组变换 → 子元素自身变换，对应数学矩阵运算为组矩阵 × 子元素矩阵，DOMMatrix的multiply方法默认是当前矩阵 × 参数矩阵，因此直接用groupMatrix.multiply(childMatrix)即可得到正确结果。
2. 无变换兼容：子元素未设置transform时，用单位矩阵替代，保证计算逻辑统一。
3. DOM操作稳定性：先将子元素转为数组再遍历，避免移除分组时影响遍历过程；先设置好新变换再迁移元素，避免视觉闪烁。

内容的提问来源于stack exchange，提问作者Andrei