svg：当外部容器旋转时，停止内部组旋转_Svg_D3.js

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

svg d3.js

svg：当外部容器旋转时，停止内部组旋转,svg,d3.js,Svg,D3.js,我面临的情况是，我有一个容器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

我面临的情况是，我有一个容器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>


xxxx

2

问题是，当我旋转主g时，所有的子元素也会旋转，这是由cource引起的。我只是想知道是否有办法防止一些内部子元素被旋转。因此，在我的示例中，我不希望foreignObject旋转，因为它包含一些文本

svg中没有绝对定位的概念，对象协调系统始终基于其父对象。因此，在本例中，当您变换并旋转g对象时，它会设置一个新的坐标系，其原点与文档原点偏移（-157.82326597222233810000000000000 6）并旋转180度，并且该新坐标系由其所有子对象继承

因此，第一个

下面的对象实际上并不是旋转的，而是它们所绘制的坐标系相对于全局坐标系是旋转的

你能把反向旋转应用到内部物体上吗？这就是我最后做的，但我觉得这并不自然。这就像做双重工作米娅的解决方案是唯一的办法。在SVG中，无法将子对象从其父对象的转换中免除。显而易见的问题是，如果你不想让它被包括在轮换中，为什么它是团队的一部分？将其移出组。