Question

我面临一个案例，我有一个容器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时，所有子元素也会旋转，这是cource的重要性。我只是想知道是否有办法防止一些内部子元素被旋转。所以在我的例子中，我不希望外部对象被旋转，因为它包含一些文本

Answer 1

在svg中没有绝对定位的概念，对象协调系统总是基于其父级。因此，在这种情况下，当您转换并旋转g对象时，它会设置一个新的坐标系，其原点从文档原点偏移（-157.82326597222223,381.00000000000006）并旋转180度，并且此新坐标系继承自所有的孩子。

因此，第一个<g>下方的物体旋转并不是真的，因为与全局坐标系相比，它们被绘制的坐标系被旋转。

svg：当外部容器旋转时，阻止内部组旋转

1 个答案: