如何通过标签包装一组 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文档的大小（或者调整这个新创建的g元素[以及它的所有子元素]的大小以适应SVG文档），我们必须获得覆盖所有元素的bbox。在上面的代码之后，我们可以调用$("#g")[0].getBBox()来获取SVG文档中所有元素的大小。如果只考虑大小，也可以采用这种方式：var setti = p.set(); setti.push(path1,path2); console.log(setti.getBBox());，但set并不适用于所有情况。

这项技术也适用于拖动，以加快拖动大型元素集的速度。与其使用Raphael的set来单独修改集合中每个对象的变换属性，不如使用g来修改g元素的变换属性就足够了。

当然要注意的是，这只适用于在Raphael中使用SVG后端的情况。

Answer 2

不能将标记包装在现有元素周围。标签有起始标签和结束标签，但没有起始元素和结束元素。

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

Answer 3

如果您使用的是jQuery，您可以使用.wrappInner（），它将把所选元素的内容包装在标记中。

Answer 4

您在Raphael中有Paper.set（）。这会给你一个组，你可以把你的rect推到这个集合中，你可以进行

group.rotate(45);

以获得您想要的功能。

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