如何对SVG执行逆透视变换？解决子元素继承父元素变换问题

问题背景 #

有一个div包含两个SVG元素：svgPlan（平面布局类SVG）和svgIcon（图标类SVG）。已给父元素svgPlan应用了一组变换：

svg.style('transform', 'perspective(30em) rotateX(33deg) scale(1.7) translate(0%, -6%)');

变换后的svgPlan呈现透视倾斜的缩放效果，但子元素svgIcon会继承该变换导致图标变形，需求是让svgIcon保持原始无变换的状态，显示在svgPlan内部。

解决方案：应用逆变换抵消父元素影响 #

CSS变换本质是矩阵运算，给子元素应用父元素变换的逆变换，即可抵消继承的变换效果。有两种实现方式：

方式1：手动编写逆变换组合 #

根据父元素的变换顺序（CSS变换从右往左执行，逆变换需反向执行逆操作），逐个抵消每个变换：

1. 父元素最后一步是translate(0%, -6%)，逆操作为translate(0%, 6%)
2. 父元素的scale(1.7)，逆操作为scale(1/1.7)（约0.588）
3. 父元素的rotateX(33deg)，逆操作为rotateX(-33deg)
4. 透视效果的影响可通过上述变换组合抵消，若需更精确可配合调整变换原点

修改后的示例代码：

<div>
  <svg id="svgPlan" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2118.5 624.2" enable-background="new 0 0 2118.5 624.2" xml:space="preserve"
style="transform:perspective(30em) rotateX(30deg) scale(1.17)">
       <rect width="1200" height="400" style="fill:rgb(224,224,224);stroke-width:3;stroke:rgb(0,0,0)" />
       <g id="svgIcon" style="transform: translate(0%, 6%) scale(0.8547) rotateX(-30deg); transform-origin: 50% 50%;">
            <image x="550" y="120" width="120" height="120" xlink:href="your-icon-url.svg">
            </image>
       </g>
  </svg>
</div>

（注：示例中scale的逆值为1/1.17≈0.8547，对应父元素的scale参数）

方式2：通过JavaScript计算逆矩阵（更精确） #

当变换组合复杂时，手动编写逆变换容易出错，可通过JS获取父元素的变换矩阵，计算逆矩阵后直接应用到子元素：

const svgPlan = document.getElementById('svgPlan');
const svgIcon = document.getElementById('svgIcon');

// 获取父元素的计算变换矩阵
const computedStyle = window.getComputedStyle(svgPlan);
const transformMatrix = new DOMMatrix(computedStyle.transform);

// 计算逆矩阵
const inverseMatrix = transformMatrix.invertSelf();

// 将逆矩阵应用到子元素
svgIcon.style.transform = `matrix3d(${Array.from(inverseMatrix).join(', ')})`;

这种方法能完全抵消父元素的所有变换效果，包括透视带来的空间变形。

内容的提问来源于stack exchange，提问作者Mourad Over Flow