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

Question

我有一个 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 对象或类似的东西？

Answer 1

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

您必须使用 cloneNode 克隆节点.