javascript - 为什么两个 css matrix3d 转换得到不同的结果？

Question

我想将 svg 从正方形转换为梯形。

我参考this site以两种方式实现了转换。一个是 svg 标签中的转换，另一个是 g 标签中的转换。使用 svg 标签进行转换后，得到了预期的结果。但是，当它在g标签中进行转换时，它并不能很好地转换。

这两个代码有什么区别？如何修复它以在 g 标签中进行所需的转换？

<svg id="transform" width="100" height="100" overflow="visible"
     style="transform-origin: 100px 100px 0px; transform: matrix3d(1.00917, 0, 0, 9.2e-05, 0, 0.908257, 0, -0.000917, 0, 0, 1, 0, 0, 0, 0, 1);">
  <g transform="translate(100,100)">
    <rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"></rect>
  </g>
</svg>

<svg id="transform2" width="100" height="100" overflow="visible">
  <g id="upper"
     style="transform-origin: 100px 100px 0px; transform: matrix3d(1.00917, 0, 0, 9.2e-05, 0, 0.908257, 0, -0.000917, 0, 0, 1, 0, 0, 0, 0, 1);">
    <g transform="translate(100,100)">
      <rect x="0" y="0" width="100" height="100" fill="none" stroke="red"></rect>
    </g>
  </g>
</svg>

源代码和演示在这里https://codepen.io/fbkclanna/pen/LYYEPJo。

我希望红色方块以与蓝色方块相同的方式进行转换。

标签： javascripthtmlcsssvghomography