CODEWITHSUNDEEP
javascriptsvgsnap.svg
user2217288
user2217288

Reputation: 547

Is it possible to load part of svg file using snap.svg?

I have svg

<svg><g id="g1">polygons here...</g><g id="g2">polygons here...</g></svg>

Now I'm loading using snap.svg

<svg id="svg" width="1024"></svg>
    var s = Snap("#svg");
    s.attr({ viewBox: "0 0 1024 3250" });
    Snap.load("URLHERE", function(f){
        s.append(f);
    }) ;

Is it possible to take only part os file and lod it like f.select("#g1") and than append only that part os file ?

Upvotes: 1

Views: 445

Answers (2)

user2217288
user2217288

Reputation: 547

Well i found solution. I just take the f object get part of svg i need and then append it like so:

var g = f.node.childNodes[4].querySelector("#HERE");

and after append and it works.

Upvotes: 1

Steeve
Steeve

Reputation: 1341

Take a look at the implementation of Snap.load:

Snap.load = function (url, callback, scope) {
    Snap.ajax(url, function (req) {
        var f = Snap.parse(req.responseText);
        scope ? callback.call(scope, f) : callback(f);
    });
};

It 'loads' the svg with an ajax call and delegates the loading part to Snap.parse.

You could implement your own version which parses the xml and extracts parts of the svg to be parsed by Snap.parse().

Something like:

myLoad = function (url, callback, scope, WHAT_TO_LOAD) {
    Snap.ajax(url, function (req) {
        var svgDataToParse = req.responseText;
        var result = "";
        // DO SOMETHING WITH svgDataToParse
        var f = Snap.parse(result);
        scope ? callback.call(scope, f) : callback(f);
    });
};

Upvotes: 0

Related Questions