javascript - 如何在 snapsvg 上将一个元素附加到另一个元素中？

Question

我正在使用 Snapsvg http://snapsvg.io/ 构建多米诺骨牌。

这是到目前为止的代码。

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)

我构建了宽度:100 和高度:200 的 block 结构 var elem，并且构建了一个正方形 var s1 width:90 height:90。我正在尝试将 s1 附加到 elem 内。当我使用 s1.append(elem) 时，elem 消失了，我做错了什么？

Answer 1

在 SVG 图形元素中，即矩形、多边形等是不可嵌套的。

有一些容器(Paper.group)可以包含图形元素，如果需要，您可以向其中添加变换以一次移动多个元素。您可以创建其中之一，并将两个 rect 元素作为同级元素放入其中。