使用SnapSVG将内部SVG元素附加到DOM元素 [英] appending inner SVG elements to a DOM element with SnapSVG

问题描述

我能够使用以下方法加载一些SVG并将它们（节点）附加到DOM元素：

I'm able to load a few SVGs and append them (the nodes) to a DOM element using:

container.appendChild（ fragment.node.cloneNode（true））;

现在，如果我想这样做，只加载一个SVG文件并提取节点，例如：

Now if I want to do the same, but by loading only one SVG file and extracting nodes from it, like:

let myElement = fragment.select（'#elementID'）;
container.appendChild（myElement.node.cloneNode（true））;

...那不是工作，我认为这是因为 myElement 是元素而不是片段。 myElement.node 显示的标签没有被SVG元素包装。

...that doesn't work, and I assume it's because myElement is an element and not a fragment. myElement.node shows a tag that isn't wrapped by an SVG element.

如何将SVG元素包裹在 myElement 周围，以便可以将其附加到另一个DOM元素上？

How do I wrap an SVG element around myElement so I can append it to another DOM element?

推荐答案

在假设您的源 SVG包含在文档中的前提下，这就是您选择它的方式，

Proceeding on the assumption that your "source" SVG is contained in the document, and that's how you're selecting it, you don't actually need anything special.

<svg viewBox="[appropriate values here]">
    <use xlink:href="#elementID" />
</svg>

这将克隆具有给定ID的元素，而无需任何进一步的努力。

This will "clone" the element with the given ID without any further effort.

这篇关于使用SnapSVG将内部SVG元素附加到DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！