How to select fragments of an existing SVG using Snap.svg

Question

I try to run Snap.svg locally, but the Snap.load () function makes an AJAX request that is not resolved locally (in Chrome, anyway). Below is my code:

window.onload = function () {

    var s = Snap("#headDiv");
    Snap.load("emotions.svg", function(f) {

        eyes = f.select("#eyes");
        lids = f.select("#lids");
        head = f.select("#head");

        s.append(f);
    });
};

So, while this works fine with the server, I would like it to run locally. What would be my best option to include my emotions.svg file without an AJAX request?

I know that it’s just easy to throw away SVG in a DIV, but I was not able to access the fragments this way using the current script. Any ideas?

Answer 1

Change:

window.onload = function () {

var s = Snap("#headDiv");
Snap.load("emotions.svg", function(f) {

    eyes = f.select("#eyes");
    lids = f.select("#lids");
    head = f.select("#head");

    s.append(f);
});
};

Simply:

window.onload = function () {

    eyes = Snap.select("#eyes");
    lids = Snap.select("#lids");
    head = Snap.select("#head");
};

And then placing the actual SVG script in the target DIV worked fine.