如何在父元素缩放时限制子元素偏斜

Question

当缩放父元素时，有没有办法限制旋转的子元素偏斜？

这是我的代码

<svg viewbox="0 0 500 500">
<g class="parent" transform="matrix(1.71341 0 0 1 -42.302 0)">
    <path d="M59.295623779296875,59.295623779296875 L470,59.295623779296875 L470,470 L59.295623779296875,470Z"></path>        
    <g class="shape1" transform="matrix(-0.774634 0.63241 -0.63241 -0.774634 481.409 228.445)">
        <ellipse rx="100" ry="100" cx="200" cy="200"></ellipse>            
    </g>
    <g class="shape2" transform="matrix(1 0 0 1 0 0)">
        <ellipse rx="70" ry="70" cx="400" cy="400"></ellipse>        
    </g>
</g>
</svg>     

我创建了一个JsFiddle http://jsfiddle.net/tYqdk/30/ 。在小提琴形状1（椭圆与绿色）旋转。将比例应用于父元素时，shape1会变得偏斜。

当子元素的旋转为90,180,270或360时，没有问题。

有没有办法解决这个问题？

Answer 1

如果您希望子元素不受父变换的影响，则需要对子元素应用逆变换。

如果不打算改变群组属性，为什么孩子甚至在群组内？将其移到组外或将转换向下移动到您希望它影响的子项。