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());，但set并非适用于所有情况。

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

group.rotate(45);

获取您正在寻找的功能。

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

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

4 个答案: