如何包装一组svg元素 <g> 标签？

Question

如何在javascript（Raphael）创建后用标签包装svg元素集？

或者我如何在特定元素后关闭g标签？ 当我在创建这些元素之前启动g标记。 在这种情况下，g标签已启动但不会结束。

这是我的代码

Answer 1

一种方法是追加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 doc的大小（或者调整这个新创建的g元素[以及所有它的孩子的长度]以适应SVG doc）我们必须得到bbox它涵盖了所有元素。 在上面的代码之后，我们可以调用$("#g")[0].getBBox()来获取SVG doc中所有元素的大小。 如果只考虑尺寸，也有这种方式： var setti = p.set(); setti.push(path1,path2); console.log(setti.getBBox()); var setti = p.set(); setti.push(path1,path2); console.log(setti.getBBox()); ，但是set并不适用于所有情况。

此技术也适用于拖动，加速拖动大型元素集。 而不是使用Raphael的set ，它单独修改集合中每个对象的变换属性，使用g代替，修改g元素的变换属性就足够了。

当然，谨慎只有在Raphael中使用SVG后端时才适用。

Answer 2

如果您正在使用jQuery，则可以使用.wrapInner（），它将在标记中包含所选元素的内容。

Answer 3

您无法在现有元素周围包装标记。 标签有一个起始和结束标签，但没有起始元素和结束元素。

您必须创建一个g元素，并将现有元素移动到该新元素中。

Answer 4

你在拉斐尔有Paper.set（）。 这将返回一个组，你可以将你的矩形推入这个集合，你可以这样做

group.rotate(45);

获得您正在寻找的功能。

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