重用 snap.svg 加载的 svg 到不同的元素

【问题标题】：reusing snap.svg loaded svg into different elements重用 snap.svg 加载的 svg 到不同的元素
【发布时间】：2014-10-17 19:43:58
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

标签： jquery svg snap.svg

【解决方案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());
});

在您的 Fiddle 中，您将 svg (tux.svg) 加载到 svg 元素（#step1、#step2、#step3）中。只需选择第一个 g 并在每次需要附加时克隆它。

【讨论】：