如何在 snapsvg 上将一个元素附加到另一个元素中? [英] How to append an element inside another on snapsvg?

问题描述

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

I'm building a domino piece using 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)

我构建了块结构 var elem，即 width:100 和 height:200，我构建了一个正方形 var s1 width:90 height:90.我正在尝试将 s1 附加到 elem 中.当我使用 s1.append(elem) 时，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?

推荐答案

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

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

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

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.

这篇关于如何在 snapsvg 上将一个元素附加到另一个元素中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！