取消组合

Question

我们正在开发一个项目，从头开始创建一个SVG编辑器（我们不能使用任何外部库） - 而且我们遇到了障碍。

我们需要创建一个工具来对形状进行分组，这是我们设法完成的，我们也可以在组中使用所有工具（缩放/平移/旋转）。然而，我们仍然陷入了试图取消组合的地步。我认为这两个选项要么从组元素中获取变换，然后以某种方式将它们应用于每个元素，要么忽略变换组，只是从一开始就将变换应用于每个元素。

是否有人使用此功能或有任何可能有用的启动想法？因为变换不是可交换的，例如，每个形状的旋转都围绕着不同的相对点，所以我们很难被卡住。

Answer 1

转换以嵌套方式工作。因此，要取消组合并将组变换应用于子项，您需要做的就是在父组之前添加＆＃39;转换为孩子们的变形。

所以以下两个SVG是等价的：

＆＃13;

＆＃13;

svg {
  border: solid 1px blue;
}

＆＃13;

<svg>
  <g transform="translate(100,30)">
    <rect width="100" height="80" transform="rotate(30, 50,40)"/>
  </g>
</svg>

<br/>

<svg>
  <rect width="100" height="80" transform="translate(100,30) rotate(30, 50,40)"/>
</svg>

＆＃13;

＆＃13;

＆＃13;