如何通過<g>標籤包裝一組svg元素？

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

它使用jQuery來簡化DOM操作。我使用這種類似的技術將SVG中的所有子元素附加到一個父組中，以簡化（並加速）確定所有元素的實際邊界框大小。有時候，SVG文檔並沒有說明SVG根元素的寬度和高度，或者它是錯誤的，爲了調整SVG文檔的大小（或者調整這個新創建的g元素[以及所有兒童的長度]以適應SVG doc），我們必須得到bbox其中涵蓋了所有的元素。在上面的代碼之後，我們可以調用$("#g")[0].getBBox()來獲取SVG文檔中所有元素的大小。如果僅考慮尺寸，也有這種方式：var setti = p.set(); setti.push(path1,path2); console.log(setti.getBBox());，但set並不適用於所有情況。

此技術也適用於拖動，加速拖動大型元素集。而不是使用Raphael的set（它單獨修改集合中每個對象的transform屬性），而是使用g來代替，修改g元素的transform屬性就足夠了。

當然，這隻適用於在Raphael中使用SVG後端的情況。

Answer 4

如果您使用的是jQuery，您可以使用.wrapInner（）將所選元素的內容包裝到標籤中。