タグのセットを<g>タグでラップする方法は？

Question

javascript（Raphael）によって作成された後、svg要素のセットをタグでラップする方法はありますか？

または、特定の要素の後にgタグを閉じるにはどうすればよいですか？これらの要素が作成される前にgタグを開始します。この場合、gタグは開始されますが、終了しません。

Here is my code

Answer 1

あなたは既存の要素の周りにタグをラップすることはできません。タグには開始タグと終了タグがありますが、開始要素と終了要素はありません。

g要素を作成し、既存の要素をその新しい要素に移動する必要があります。

Answer 2

RaphaelにはPaper.set（）があります。これにより、グループが返され、あなたはこのセットにあなたの四角形を押し込むことができます。あなたが探している機能を得るには、

group.rotate(45); 

があります。

参考：http://raphaeljs.com/reference.html#Paper.set

Answer 3

一つの方法は、g要素を追加し、その中に他の要素を追加することです。

$("path").click(function() { 
    var $svg = $("#mysvg"); // #mysvg is SVG doc 
    var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); 
    g.setAttribute("id", "g"); 
    $svg.append($(g)); 
    $svg.find("path").each(function() { 
     $(this).css("stroke", "red").appendTo($(g)); 
    }); 
    $("#cont").html($svg); // #cont is svg "container", eg. div 
}); 

の作業例： http://jsbin.com/ayulaq/2

これは、DOM操作を簡素化するためのjQueryを使用しています。私はこのような手法を使って、SVGのすべての子要素を1つの親グループに追加して、すべての要素の実際の境界ボックスサイズを簡単に（そして高速に）決定しました。時にはSVGドキュメントはSVGルート要素の幅と高さを明示していないか、間違っていますし、SVG docのサイズを変更する（あるいはこの新しく作成されたg要素のサイズを変更してSVG docに収まるようにします）すべての要素をカバーしています。上記のコードの後に​​、$("#g")[0].getBBox()を呼び出して、SVG docのすべての要素のサイズを取得できます。サイズが唯一の問題である場合はvar setti = p.set(); setti.push(path1,path2); console.log(setti.getBBox());ですが、setはすべての場合に適していません。

この技術は、大きな要素セットのドラッグを高速化するためのドラッグにも当てはまります。代わりにgを使用して、セット内のすべてのオブジェクトの変換属性を個別に変更するRaphaelのsetを使用する代わりに、g要素の変換属性を変更するだけで十分です。

もちろん、これはRaphaelでSVGバックエンドを使用する場合にのみ適用されます。

Answer 4

jQueryを使用している場合は、.wrapInner（）を使用して、選択した要素のコンテンツをタグにラップします。