重新使用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元素中（＃step1，＃step2，＃step3）。只需选择第一个g并在每次需要附加时将其克隆。