Javascript 将父旋转的更新坐标应用于子旋转

在下面的代码中，我在SVG中旋转一个选择框（父项）和两个子项

但是，当移除父对象（选择框）时，子对象将返回其原始（旋转前）坐标

移除父对象后，如何在子对象上应用更新的坐标。我特别需要在X，Y坐标系中保持子对象的新位置，即旋转应转换为平移，r.g.变换=平移（X，Y）。我只需要给孩子们新的x，y，这样我就可以把他们“翻译”到新的位置

这是小提琴链接

HTML代码：-

<button data-action="rotate" onclick="rotateMainRect()">Rotate +5 Angle</button>&nbsp;
<button data-action="rotate" onclick="removeRectRotation()">Remove Selection</button>
<br/>
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500">
    <g id="selectedRect">
        <rect id="rectangle" x="135" y="135" width="110" height="35" stroke="red" stroke-width="2" fill="grey" opacity="0.4" />
        <g id="button_1" transform="translate(0,0)">
            <circle cx="150" cy="150" r="5" stroke="grey" stroke-width="1" fill="none" />
        </g>
        <g id="button_2" transform="translate(0,0)">
            <circle cx="230" cy="150" r="5" stroke="grey" stroke-width="1" fill="none" />
        </g>
    </g>
</svg>

-我想要的：-

<button data-action="rotate" onclick="rotateMainRect()">Rotate +5 Angle</button>&nbsp;
<button data-action="rotate" onclick="removeRectRotation()">Remove Selection</button>
<br/>
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500">
    <g id="selectedRect">
        <rect id="rectangle" x="135" y="135" width="110" height="35" stroke="red" stroke-width="2" fill="grey" opacity="0.4" />
        <g id="button_1" transform="translate(0,0)">
            <circle cx="150" cy="150" r="5" stroke="grey" stroke-width="1" fill="none" />
        </g>
        <g id="button_2" transform="translate(0,0)">
            <circle cx="230" cy="150" r="5" stroke="grey" stroke-width="1" fill="none" />
        </g>
    </g>
</svg>

---

首先将选择矩形旋转到某个角度，然后按“删除选择”。删除所选内容后，必须将儿童放置在新位置。（现在，移回原始位置）

如果您询问是否可以使用JS直接读取两个变换圆的绝对位置，那么答案是否定的

你需要自己用三角法计算它们的位置