重複使用snap.svg加載svg到不同的元素

Question

我想使用Snap.svg加載SVG並將其添加到頁面上的幾個SVG元素。我可以使它只能加載一個實例，但當它添加到多個元素時會失敗。

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

這裏是一個的jsfiddle

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

Answer 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()); 
}); 

在你的小提琴您正在將SVG（tux.svg）到SVG元素（＃第一步，第二步＃，＃步驟3）。只需選擇第一個g並在您每次需要追加時克隆它。