2016-07-25 8 views
0

Snap SVGを使用してエディタを構築しています。 私はいくつかの変換を持つグループタグを持っています。 グループのグループを解除します。私はグループの要素をforループで親に追加しようとしましたが、変換はグループ化されていない要素では期待通りに機能しません。Snap SVGで要素をグループ化解除する方法

要素をグループ解除する方法を教えてもらえますか?

ここにJS Binがあります。ここ

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

I黒矩形をドラッグすると、グループ全体にも移動します。 私はそれをドロップすると、私はグループを解除しようとしますが、変換はグループに適用されていません。

PS:あなたは自分自身にグループを追加しようとしているように見えるように私は(ドラッグを呼び出すことはできません)族元素に

+0

あなたが追加する必要があります。あなたが言及しているように親要素(または他の要素)に要素を追加しますが、その要素を配置するために変換を把握する必要があります。 jsfiddleに例の変換を使って最小限の例を与えることができれば、私たちはさらに助けてくれるはずです。 – Ian

+0

私はフィドルを追加しようとしましたが、うまくいきませんでした。https://jsfiddle.net/harikk09/4p2jvs45/1/ – Harikrishnan

+0

jqueryを含める必要があります。また、jsfiddleでリモートダウンロードを許可するかどうか不安です。あなたはjsbinや何かを試してみることができます、それが良いかどうかを見て、それを使用する場合はjquery(単純なもの、私はあなたがそれを必要としているかわからない)を含む。 – Ian

答えて

1

コードは、少し混乱ですが、私はそれを誤解することができます。私はそれを少し修正し、IDでグループを選択しました。ちょうどcssセレクタではなく正しいIDを知るためです。

jsfiddle

私は変換のために修正された重要な部分は

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

には、編集...この行です:この場合、あなたはおそらく

item.transform(g.transform()) 

に、さらにそれを短縮することができますこれは、グループから削除するときにグループ変換を取得していることを確認し、toTransformString()を使用して変換します(必ずしもそうは必ずしも分かりませんが多くの場合、奇妙を排除するように見える)。

編集:質問は少し修正された後、それはあなたが実際にそれは次のようになり、その場合に適用する完全な行列をしたいということも...

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

jsbin

+0

あなたの答えをありがとう。実際には、既存のグループを削除する必要はありません(新しく作成したグループのみを削除します)。新しく作成したグループにテキストタグを追加してJSBinを更新し、より明確にしました。私はいくつかのマルチセレクショングループの動きをしています。私はその要素をグループに追加し、新しいグループをドラッグしているのです。 https://jsbin.com/jinita/edit?js,output – Harikrishnan

+0

グループが動いているのを見ることができますが、私がグループを解除すると変身してしまいます。これは実際の問題でした。混乱させて申し訳ありません。あなたは私を助けてくれますか? – Harikrishnan

+0

少し追加しましたが、そういう意味ですか?あなたの矩形ドラッグコードにはバグがありますが、私はあなたが他のビットに集中していると仮定します。 – Ian

関連する問題