Javascript 如何在父元素缩放时限制子元素的倾斜

在缩放父元素时，是否有方法限制旋转的子元素倾斜

这是我的密码

<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>     

我创建了一个JSFIDLE . 在小提琴中，形状1（带绿色的椭圆）旋转。将比例应用于父元素时，形状1将变为倾斜

当子元素的旋转为90180270或360时，不存在任何问题

---

有没有办法解决这个问题

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

---

如果不受组属性更改的影响，为什么孩子甚至在组中？将其移动到组外或将变换向下移动到希望其影响的子元素。

为了在缩放父元素时保留子元素的大小，我应用了逆矩阵。但我不知道如何找到逆矩阵来单独限制歪斜。我需要除skew之外的所有其他变换才能应用于子元素。