appending inner SVG elements to a DOM element with SnapSVG

问题

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

container.appendChild( fragment.node.cloneNode(true) );

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) );

...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.

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

回答1:

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>

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

来源：https://stackoverflow.com/questions/48620653/appending-inner-svg-elements-to-a-dom-element-with-snapsvg