Wie Gruppierung Elemente in Snap SVG

Question

Ich benutze Snap SVG, um einen Editor zu erstellen. Ich habe ein Gruppen-Tag mit einigen Transform. Ich möchte die Gruppe aufheben. Ich habe versucht, die Elemente in der Gruppe zu übergeordneten mit einer for-Schleife hinzufügen, aber die Transformationen funktionieren nicht wie erwartet in den ungruppierten Elementen.

Kann mir jemand eine Möglichkeit geben, Elemente aufzulösen?

Hier finden Sie den JS Bin.

https://jsbin.com/jinita/edit?js,output

hier, wenn ich das schwarze Rechteck ziehen, wird die gesamte Gruppe bewegt sich auch. Wenn ich es ablege, versuche ich die Gruppierung aufzuheben, aber die Transformationen gelten nicht für die Gruppe.

PS: Ich kann nicht nennen drag() auf dem Gruppenelement

Answer 1

Der Code ein wenig verwirrend ist, wie es aussieht Sie versuchen, eine Gruppe zu sich selbst zu schreiben, aber ich kann es Missverständnisse. Ich habe es leicht geändert und die Gruppe nach ID ausgewählt, nur um zu wissen, dass es die richtige ist, anstatt css-Selektoren.

jsfiddle

Der wichtigste Teil I für die Transformationen geändert ist diese Linie ...

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

Edit: In diesem Fall können Sie es wahrscheinlich zu

verkürzen weiter

item.transform(g.transform()) 

Dies stellt sicher, dass wir die Gruppentransformation zum Zeitpunkt des Entfernens aus der Gruppe erhalten, und wandeln sie mit toTransformString() um (ich bin mir nicht sicher, ob das ganz notwendig ist, aber scheint oft Kuriositäten zu beseitigen).

Edit: Nachdem die Frage leicht geändert worden ist, kann es sein, dass Sie tatsächlich die volle Matrix, in der die Anwendung wollen Fall wäre es ...

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

jsbin