SVG第二个变换元素Y轴定位疑问：为何取值为100而非计算值？

你疑惑的点在于等轴测变换后元素的Y轴定位为什么直接用100就行，核心原因是你用的变换组合（rotate + skewX + scale）已经把坐标系的Y轴拉伸/倾斜关系整合进去了，不需要额外用三角函数计算偏移。

咱们拆解下两个矩形的变换：

• 红色矩形：rotate(30, 0, 0) skewX(30) scale(1, 0.86062)，这个变换把原本的直角坐标系转换成了等轴测的"左平面"坐标系
• 绿色矩形：rotate(-30, 0, 0) skewX(-30) scale(1, 0.86062)，对应等轴测的"右平面"坐标系

当你给绿色矩形设置y="100"时，这个值是在原始SVG坐标系中的位置，但经过变换后，它刚好对齐到红色矩形的底部边缘——因为你的变换参数已经把等轴测的角度比例（0.86062其实就是cos(30°)≈√3/2）整合进了scale里，相当于变换已经帮你完成了三角函数的换算，所以直接用原始的边长值100就能得到正确的垂直对齐效果。

如果不用这套变换组合，直接用原始坐标加三角函数计算偏移才是必要的，但你的变换链已经封装了这个逻辑，所以不需要额外计算。

附上你的SVG代码：

<svg width="300" height="150" >
  <rect x="0" y="0" width="100" height="100" 
        transform="rotate(30, 0, 0) skewX(30) scale(1, 0.86062)" 
        style="fill:none;stroke:#FF0000;"></rect>
  <rect x="100" y="100" width="100" height="100" 
        transform="rotate(-30, 0, 0) skewX(-30) scale(1, 0.86062)" 
        style="fill:none;stroke:#00FF00;"></rect>
</svg>

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