undefined is not a function (conflict with viewbox)

[Eonasdan]

I get undefined is not a function if I make the Snap() a div:

<div id="snappy"></div>

var $snappy = $("#snappy"),
    mapSnap = Snap("#snappy");

$snappy.html("");
Snap.load("http://huei90.github.io/snap.svg.zpd/lib/malaysia.svg", function (f) {
    mapSnap.append(f);
    mapSnap.zpd(); //<--- undefined is not a function
});

I was going to do a jsfiddle example but it won't load the image cross origin :(

[hueitan]

@Eonasdan
Hi, have you tried using <svg id="snappy"></svg> ?

[Eonasdan]

@huei90

Ok, that works. Now I have a new issue. Using the scroll to zoom causes it to zoom in no matter which direction the scroll wheel is moved

[hueitan]

would you mind give me a demo link for this? thanks.

[Eonasdan]

here's a self contained example: http://jonathanpeterson.com/svg.zpd.zip

it looks like this is an issue when using viewbox

[hueitan]

Ok then. Seems we have some conflicts with viewbox!

Thanks for report this 🍻

[hueitan]

The viewBox and transform are conflicted!!!!

[tikiatua]

Please have a look at the beta branch to find an implementation that works with viewBox and transforms.. I am already using this implementation in a production setting - it is however far from complete and will probably need some manual code adjustments for your own setting.

I will try to do some further work on it at the begin of February.

[beatsforthemind]

I am also getting the "is not a function" error when calling .zpd(). Here is the code I am using to load the SVG with Snap() and how I am trying to call zpd(). I am looking to use the zoom() and zoomTo() functions with other functions. I do not have viewbox set. Can you let me know what might be going wrong here?

var s = Snap("#svg-container");
Snap.load("/path/to/my/svg/image.svg", function(data) {
    s.append(data);
});
s.zpd({
    zoom: false,
    pan: false,
    drag: false
});

[hueitan]

Try

var s = Snap("#svg-container");
Snap.load("/path/to/my/svg/image.svg", function(data) {
    s.append(data);
    s.zpd({
        zoom: false,
        pan: false,
        drag: false
    });
});

[beatsforthemind]

So, like the OP, I was calling Snap() on a div instead of an empty SVG element. I called Snap() on an empty SVG element using the code you posted and it's working how I want. Snap is appending the SVG data into the empty SVG element and zpd is not showing an error. Thanks for the help!