如何在 Snap SVG 中取消组合元素答案

【问题标题】：How to ungroup elements in Snap SVG如何在 Snap SVG 中取消组合元素
【发布时间】：2016-11-28 12:12:42
【问题描述】：

我正在使用 Snap SVG 构建一个编辑器。我有一个带有一些变换的组标签。我想取消分组。我尝试使用 for 循环将组中的元素添加到父级，但转换在未分组的元素中未按预期工作。

谁能告诉我一种取消组合元素的方法？

请在此处找到 JS Bin。

在这里，当我拖动黑色矩形时，整个组也会移动。当我放下它时，我尝试将其取消组合，但变换不适用于该组。

PS：我不能在组元素上调用 drag()

【问题讨论】：

您需要将元素附加到您提到的父（或其他）元素，但您需要确定要放置在其上的转换。如果您可以在 jsfiddle 上提供一个带有示例转换的最小示例，我相信我们可以提供进一步的帮助。
我尝试添加小提琴，但不起作用：jsfiddle.net/harikk09/4p2jvs45/1
您需要包含 jquery，而且我不确定它是否允许在 jsfiddle 上进行远程下载。您可以尝试 jsbin 或其他东西，看看是否更好，如果您使用它，请包含 jquery（很简单，我不确定您是否需要它）。
找不到徽标的文件。
徽标文件已更新。 182.72.159.116/phppay/logo.svg

【解决方案1】：

代码有点混乱，因为看起来您正在尝试向自身添加一个组，但我可能误解了它。我稍微修改了一下并按 ID 选择了组，只是为了知道它是正确的，而不是 css 选择器。

我为变换修改的关键部分是这一行......

item.transform( g.transform().localMatrix.toTransformString() )

编辑：在这种情况下，您可以将其进一步缩短为

item.transform( g.transform() )

这确保我们在从组中移除时获得组转换，并使用 toTransformString() 进行转换（我不确定这是否完全必要，但似乎经常消除异常）。

编辑：在对问题稍作修改后，您可能实际上希望应用完整的矩阵，在这种情况下它将是......

item.transform( item.transform().globalMatrix.toTransformString() )

【讨论】：

感谢您的回答。实际上我不必删除现有组（我只删除新创建的组）。我通过将文本标签添加到新创建的组中来更新 JSBin，使其更加清晰。我正在做一些多选组运动。这就是我将元素添加到组中并拖动新组的原因。 jsbin.com/jinita/edit?js,output
现在您可以看到该组正在移动，但是在我取消组合的那一刻，变换变得一团糟。这是实际问题。对困惑感到抱歉。你能帮帮我吗？
我加了一点，你的意思是这样吗？你的矩形拖动代码有一个错误，但我假设你只是专注于另一位。
实际上，您正在通过删除已经在 svg 中的组来修改实际的 svg 结构。我不想那样做。这就是为什么我要创建一个 g 然后删除新创建的 g。
使用您的 jsbin（不是我的），只需将这一行放入您的代码中... item.transform().globalMatrix.toTransformString() 而不是 g.transform().localMatrix.toTransformString () 你会发现这就是变化中最重要的事情