Track cursor with Snap-SVG

Question

I was wondering if there is an easy way of displaying a small circle at the position of the mouse cursor using Snap-SVG. I have been going through a lot of the API reference, but couldn't find anything. I'm somehow expecting it to be a simple function.

Answer 1

You can attach a handler to the Snap paper, you may want to deal with offsets of where the paper is, which can make it a bit fiddlier (and can get even trickier depending on layout/scroll/zoom, but I've tried to keep it as straightforward as possible), I've include a couple of circles to highlight the difference.

jsfiddle

var s = Snap(400,400);
var c1 = s.circle(0,0,10).attr({ fill: "red" });
var c2 = s.circle(0,0,10).attr({ fill: "blue" });

function moveFunc( ev, x, y ) {
    c1.attr({ cx: x , cy: y });
    c2.attr({ cx: x - s.node.offsetLeft, cy: y - s.node.offsetTop });
};

s.mousemove( moveFunc );