重用snap.svg将svg加载到不同的元素中 [英] reusing snap.svg loaded svg into different elements

问题描述

我正在尝试使用Snap.svg加载SVG，并将其添加到页面上的几个SVG元素中.我可以使其仅加载一个实例即可工作，但是将其添加到多个元素时会失败.

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

这是一个jsfiddle

Here is a jsfiddle

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

推荐答案

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并在每次需要添加时克隆它即可.

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.

这篇关于重用snap.svg将svg加载到不同的元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！