将多个SVG节点实例添加到DOM

时间:2018-02-02 16:09:22

标签: javascript svg snap.svg

我有一个SVG文件列表,所以我用SnapSVG加载它们。 现在我想随机地将每个SVG的多个实例添加到容器中,其中一些实例会重复出现。

问题在于,当我添加一个已添加的时,第一个消失了。

    var objects; // pretend this is a list of objects which are SVG files loaded with SnapSVG.

    for (var i = 0; i < NUM_OBJECTS; i++) {
        let r = getRandomInteger(0, svgs.length - 1);

        container.appendChild( objects[r].node );
    }

在这里,它从对象抓取节点并将其附加到容器:

container.appendChild( objects[r].node );

我假设对象仍然保留对节点的引用(因为它可以在将来的迭代中再次添加)。

但是如果我们再次抓取节点并将其添加到DOM中,之前添加的节点就会消失,这使我认为它是同一个节点的唯一实例。

这有意义吗?如果是这样,有没有办法克隆SVG对象或类似的东西?

1 个答案:

答案 0 :(得分:3)

DOM节点(无论是HTML还是SVG)不能位于多个位置(任何节点都指向其父节点)。

您必须使用cloneNode克隆节点。