CODEWITHSUNDEEP
javascriptajaxsvgsnap.svg
Aaron
Aaron

Reputation: 541

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

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?

Upvotes: 6

Views: 2192

Answers (1)

Aaron
Aaron

Reputation: 541

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.

Upvotes: 4

Related Questions