4

我面临一个案例，我有一个容器 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被旋转，因为它包含一些文本

4

1 回答 1

2

svg 中没有绝对定位的概念，对象坐标系统始终基于其父对象。因此，在这种情况下，当您转换和旋转 g 对象时，它会设置一个新坐标系，其原点与文档原点偏移 (-157.82326597222223, 381.00000000000006) 并旋转 180 度，这个新坐标系由它的所有孩子。

因此，第一个下方的对象并没有真正<g>旋转，而是与全局坐标系相比，它们被绘制到的坐标系旋转了。

于 2013-05-20T21:39:39.237 回答