How to wrap svg set of elements by tag after they are created by javascript(Raphael)?

Or how can i close the g tag after specific elements? As i starts the g tag before these elements are created. In this case g tag is started but doesn't ends up.

Here is my code

How to wrap svg set of elements by tag after they are created by javascript(Raphael)?

Or how can i close the g tag after specific elements? As i starts the g tag before these elements are created. In this case g tag is started but doesn't ends up.

Here is my code

• javascript
• svg
• raphael

4 Answers 4

One way is to append g element and append other elements inside it.

$("path").click(function() {
    var $svg = $("#mysvg"); // #mysvg is SVG doc
    var g = document.createElementNS('http://www.w3/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
});

Working example: http://jsbin./ayulaq/2

It uses jQuery to simplify DOM operations. I have used this like technique to append all child elements in SVG into one parent group to simplify (and speedup) determining actual bounding box size of all elements. Sometimes SVG documents do not explicate the width and height of SVG root element or it is wrong, and to resize SVG doc (or resize this newly created g element [and so long all it's children] to fit SVG doc) we have to get bbox which covers all the elements. After above code we can call $("#g")[0].getBBox() to get the size of all elements in SVG doc. There is also this way if the size is only concern: var setti = p.set(); setti.push(path1,path2); console.log(setti.getBBox());, but set is not suitable in all cases.

This tech applies also to dragging, to speedup dragging large element sets. Instead of using Raphael's set, which modifies transform attribute of every object in set individually, using g instead, modifying g element's transform attribute is enough.

Caution is of course that this applies only when SVG backend is used in Raphael.

You can't wrap a tag around existing elements. A tag has a starting and ending tag, but there is no such thing as a starting element and an ending element.

You have to create a g element, and move the existing elements into that new element.

If you're using jQuery, you can use .wrapInner() which will wrap the content of the selected element in a tag.

You have Paper.set() in Raphael. This returns you a group and you can push your rect into this set and you can do

group.rotate(45);

to get the functionality you are looking for.

Ref: http://raphaeljs./reference.html#Paper.set