Hi, first off thanks for the hard work on snap.

I found that my animations were leaking memory (and found that the problem could be reproduced by debugging the demos > snap-mascot page) and did some digging. Turned out that the issue was with the following handlers:

eve.once("mina.finish." + anim.id, function () {
    delete el.anims[anim.id];
    callback && callback.call(el);
});
eve.once("mina.stop." + anim.id, function () {
    delete el.anims[anim.id];
});

When the mina.stop event triggers the handler for the mina.finish event is not deleted and vice versa. The handlers remain in memory until the application is terminated since they are referenced by eve's events property.

I fixed the issue by removing mina.stop altogether and triggering mina.finish in stopit. There is still a less major memory leak issue involving the handlers but I haven't fixed it yet.

Hope this helps someone, cheers.

This PR creates a separate bundle: dist/snap.svg-commonjs-min.js that does not embed the 'eve' dependency. Additionally, the eve dependency is passed to the plugins via the Snap._ object, which was already used to pass around jQuery.

Fixes #447, #341

It seems the newest version 0.4.1 doesn't allow to animate a polygon's "points" attribute.

var s = Snap(400, 620);
var pol = s.polygon([0, 464, 0, 464, 111.6, 464, 282.5, 464, 457.4, 464, 613.4, 464, 762.3, 464, 912.3, 464, 1440.1, 464, 0, 464]);
pol.animate(
  { points: [0, 464, 0, 367, 111.6, 323.3, 282.5, 373, 457.4, 423.8, 613.4, 464, 762.3, 464, 912.3, 464, 1440.1, 464, 0, 464] },
  1000)

It errors with 'Error: Invalid value for attribute points="0"'

I got it working with version 0.3.0. So some change must have broken this behavior

https://jsfiddle.net/sjhcnuus/ In the above example I would expect rectangle2 to move above rectangle1 and completely cover it yet all of the attr values fed into rectangle2.animate({}) seem to be converted into pixel based values.

P.S. Snap.svg is awesome keep up the great work

I was trying to attach an onmove event listener to the drag method and expected it to behave like a normal JS event listener, but it seems that when I pass a listener function, the normal drag behavior is overwritten and the element doesn't move anymore.

This fiddle shows what I mean: http://jsfiddle.net/XLe6N/

The black circle doesn't react to mouse events anymore.

Are we supposed to move the elements ourselves when attaching an onmove listener?

npm / component / bower or something so that the little chunks are useful to people (and to keep yourself sane), then produce a snap build from those. Otherwise looks good! :D

This makes it possible to require Snap.svg with Browserify and modifies package.json to point towards the correct module entry point instead of the Gruntfile.

Supporting AMD is great and all, but it's only a few more lines to support CommonJS style module systems when you're already using the factory pattern. Plus, npm is already being used to install eve, so I didn't even have to modify dependencies to get things working. Edit: looks like eve was only included as a devDependency, so that needed to be changed, too.

Thanks in advance!

I get this error with the following code (with snap.svg.js 0.5):

var s = Snap("#svg1"); 
var r = s.rect(100,100,100,100).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 1 });

console.log(r.attr("fill"));

snap.svg.js:4123 Uncaught TypeError: Cannot read property '2' of null
    at Function.Snap.deurl (snap.svg.js:4123)
    at Element.<anonymous> (snap.svg.js:4511)
    at eve (snap.svg.js:111)
    at Element.attr (snap.svg.js:2276)
    at app.js:4
Snap.deurl @ snap.svg.js:4123
(anonymous) @ snap.svg.js:4511
eve @ snap.svg.js:111
Element.attr @ snap.svg.js:2276
(anonymous) @ app.js:4

Can someone confirm?

thank you

Snap Snap.svg 0.4.1

When loading an external SVG and cloning it, to iterate a series of buttons for a menu. Chrome (Mac) produces the failure:

Uncaught TypeError: Failed to construct 'URL': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

firefox: TypeError: Constructor URL requires 'new' at line 3136

which is in function fixids:

  attr[name] = URL(id);

When I make that: attr[name] = new URL(id);

Firebug produces TypeError: radialGradientSiap76j711b is not a valid URL.

Loading and then displaying this file works as expected.

I'm using the default Element.drag() handler with a viewBox applied and it doesn't scale the mouse delta's accordingly, so the drag effect is amplified by 2-3x what it should be, is there an easy way to take the viewBox scaling factor into account?

I am working on a puzzle game and I use snap.svg and javascript to move the elements of the game . But the problem is that any user can drag the element of svg anywhere on the screen, including out of the droppable area. I want to prevent it , I found some resources on internet about snap.svg but it doesn't like i want

I share the code here : https://jsfiddle.net/j058aoyn/2/

my script :

       var s = Snap("#mysvg");
        var dragging = false;
        var tmp = null
        
        Snap.load("puzzle.svg", onSVGLoaded)
        
        function onSVGLoaded(frag) {
            s.append(frag);
            s.mouseover(clickDrag)
        }
        
        function clickDrag(e) {
            tmp = e.target.parentNode.getAttribute('index');
            if (tmp != null) {
                var t = Snap(e.target);
                t.drag();
            }
            if (t !== undefined && (t.data('dragEl') === undefined) && (dragging === false)) {
                t.drag(dragMove, dragStart, dragStop).data('dragEl', t);
            }
        }
        
        function dragStart(x, y, e) {
            this.data('targetPiece', e.target);
        }
        
        function dragMove(dx, dy, x, y, e) {
            if (tmp !== this.data('targetPiece')) {
                return
            }
            // Check the event isn't coming from a different state
            this.data('dragEl').attr({cx: x - 10, cy: y - 10})
            dragging = true;
        }
        
        function dragStop() {
        }

Stepping through the getting started example, the steps work up until step 14. When you're on step 13 and you click the play button to advance to step 14, this error shows up in the debug console:

The page I am talking about is the one that shows up at this url:

snapsvg.io/start/

The clock works OK for 0.3 and its URL is: https://oreillymedia.github.io/svg-essentials-examples/ch14/snap_animated_clock.svg

I copied the source to my own directory, and used it with snap.svg-min.js version 0.5.1. The animation failed: the minuteHand and hourHand are working OK, but the secondHand is not moving. I also saw this failure manifesting itself differently: the minuteHand was getting detached from the clock and shifting away.