javascript - How to append an element inside another on snapsvg?

Question

I'm building a domino piece using Snapsvg http://snapsvg.io/

Here is the code so far.

var s = Snap(800,600);

// elem structure
var elem = s.rect(10,10,100,200);
var s1  = s.rect(0,0,90,90);

elem.attr({
    fill: '#fff',
    stroke: '#000',
    strokeWidth: 2
});

s1.attr({
    fill: '#bada55'
});

s1.append(elem)

I built the piece structure var elem that is width:100 and height:200 and I built an square var s1 width:90 height:90. I'm trying to append s1 inside elem. When i use s1.append(elem), the elem disappears, what am I doing wrong?

Answer 1

In SVG graphical elements i.e. rect, polygon etc are not nestable.

There are containers (Paper.group) which can contain graphical elements which you can add transforms to to move multiple elements at once if you want. You could create one of those and put both your rect elements within it as siblings.