reusing snap.svg loaded svg into different elements

问题

I'm trying to load a SVG using Snap.svg and adding it to several SVG elements on a page. I can make it work only loading one instance, but it fails when I add it to multiple elements.

s1 = Snap('#step1');
s2 = Snap('#step2');
s3 = Snap('#step3');

Snap.load('img/steps.svg', function (l) {   
    s1.append(l);
    s2.append(l);
    s3.append(l);
});

Here is a jsfiddle

http://jsfiddle.net/denoise/6s7L119a/

回答1:

Snap.load('https://rawgit.com/VengadoraVG/moving-to-gnulinux/master/img/tux.svg', function (l) {
    var g = l.select("g");
    s1.append(g.clone());
    s2.append(g.clone());
    s3.append(g.clone());
});

In your Fiddle you are loading a svg (tux.svg) into svg elements (#step1, #step2, #step3). Just select the first g and clone it every time you need to append it.

来源：https://stackoverflow.com/questions/26432367/reusing-snap-svg-loaded-svg-into-different-elements