Create a group that doesnt depend on a Snap instance

Question

Here is what I want to do :

var a = Snap("#id");

var group = new SnapGroup(); // unfortunatly didnt find how to do it
// for some reasons i dont want to do a.group();
group.circle(5,5,5);
a.add(group);

Here is what I did :

var a = Snap("#id");

s = Snap(); // creates a SVG element instead of a group
s.circle(5,5,5);

a.add(s);

It works, the circle is rendered, but then I cannot move the group :

s.attr({"x":60}); // the group doesnt move

Actually it looks like that when we embed and <svg> elements into an other one. Then it becomes impossible to move the embeded svg element in the parent one.

I would like to know how to create a group element without doing snapInstance.group() ? And then add it to a Snap instance.

Answer 1

I'm still not quite sure from your description what you are after, as I suspect it may depend how you are generating the original group (if its just a bit of svg markup or imported).

 Snap.parse('<g></g>'); may be enough to fiddle with, to parse into a fragment.

See if this helps...its an example with two separate SVG elements and Snap instances. It will draw a rect from the original SVG markup string with a group,add a circle from Snap, and on the 2nd instance it will translate the group by 75 as well.

<svg id="svg1" width="200" height="200"></svg><br />
<svg id="svg2" width="200" height="200"></svg>

...
    var paper1 = Snap("#svg1");
    var paper2 = Snap("#svg2");
    var groupMarkup = '<g><rect x="0" y="0" width="70" height="70" opacity="0.3"/><text x="0" y="15">original</text></g>'; 

    var parsedMarkup1 = Snap.parse( groupMarkup ); //parse from a string derived elsewhere
    var parsedMarkup2 = Snap.parse( groupMarkup );


    // example1  just use the markup with its original group

    paper1.add( parsedMarkup1 )
          .add( paper1.circle(100,50,50)
                      .attr('fill', 'red' ) );


    // example2, will create a new group and add the existing group to it, and then move it

    var outerG = paper2.g()
                       .transform('t75,0');    //create a group and move it
    outerG.add( parsedMarkup2 );               //add the original group/square
    outerG.add( paper2.circle(70,50,50)        //add a circle
                      .attr('fill', 'blue' ) );

   var clone = outerG.clone();                  //lets create a clone
    clone.transform('r45t50,50');               //translate and rotate the clone

fiddle here http://jsfiddle.net/v4bJa/