将多个 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 克隆节点。

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

Add multiple instances of SVG node to DOM

javascript

svg

snap.svg