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.

文章来源: reusing snap.svg loaded svg into different elements