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

Question

I'm trying to run Snap.svg locally, but the Snap.load() function makes an AJAX request, which isn't allowed locally (in Chrome, anyways). 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 from a server, I'd like to get this to run locally. What would be my best option to include my emotions.svg file without making an AJAX request?

I know it's easy to just throw the SVG in the DIV, but I wasn't able to access the fragments that way with my current script. Any ideas?

Answer 1

Changing:

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

To 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 great.