在嵌套的SVG坐标系之间执行拖动/调整大小/旋转/旋转

Question

我正在研究的应用程序具有嵌套SVG框的层次结构，用户可以使用鼠标进行操作，我正在尝试找到最有效和/或可维护的方法来跟踪所涉及的相对坐标系，必要时在它们之间进行转换等。

预期的界面很直观。我将明确列出要求：

1. 可以使用鼠标移动，旋转和调整大小。
2. 当调整大小，移动或旋转盒子时，它的孩子会随着它流动地移动和旋转。
3. 可以将盒子放入新的父母身边。
4. 某些线段将跨越边界。
5. 鼠标事件坐标必须与其正在使用的任何局部坐标空间流畅地同步。

[主要问题] 在我看来，这种互动对于许多类型的应用都是可取的。当然，我不是第一个尝试这个的人。但我找不到一个好的图书馆或一套最佳实践。我遇到的最接近的是interact.js，但事实证明它太不完整且不灵活。还有什么吗？

[子问题] 如果那里没有一个好的库，我正在考虑至少两种方法：（i）只有一个坐标空间，并通过让他们咨询他们的父母然后应用他们的本地变换来递归地计算特定框的坐标。 （ii）在每个框的包含transform上使用<g>，因此我们得到嵌套坐标空间的层次结构。后者似乎更易于维护，但前者可能更具性能吗？欢迎思考。