我面临一个案例，其中我有一个容器 svg 元素和一组内部子元素：
<g transform="translate(-157.82326597222223, 381.00000000000006), rotate(180)">
<path d="M 0 10 L 600 10 L 680 63.5 L 600 117 L 0 117 Z"></path>
<g transform="translate(180, 35.099999999999994)">
<foreignObject width="240" height="46.800000000000004">
<body>
<div style="font-size: 19.400000000000002px; text-align: center;">xxxx
<br>2<br>
</div>
</body>
</foreignObject>
</g>
</g>
问题是，当我旋转主 g 时，所有子元素也会旋转，这当然是合理的。我只是想知道是否有办法防止某些内部子元素旋转。所以在我的示例中，我不想旋转foreignObject，因为它包含一些文本
svg 中没有绝对定位的概念，对象坐标系统始终基于其父级。因此，在本例中，当您变换和旋转 g 对象时，它会建立一个新的坐标系，其原点与文档原点偏移 (-157.82326597222223, 381.00000000000006) 并旋转 180 度，并且这个新坐标系继承为它的所有孩子。
因此，第一个对象下方的对象实际上并不是<g>旋转的，而是它们所绘制的坐标系相对于全局坐标系而言是旋转的。