How to use touch events to move a loaded .SVG to exact screen coordinates (using Snap)

Question

I am using the Snap library and I want to move an element I loaded into my page. I want to move (or "translate") the object to exact screen coordinates that come from a touch event (to get the object to follow my finger). These can be screenX, pageX, or clientX (and y). Unfortunately, the way I see it, Snap.svg only uses these "transformation strings" and matrices, which means that I can only move an element relative to its initial position instead of to precise screen coordinates.

A simple way of asking this would be, how do you move a loaded .SVG to an exact screen location, not a relative one.

Because I haven't drawn these images, but rather loaded them, I do not have access to their "cx" or "cy" properties. Here is a fiddle with my issue.

http://jsfiddle.net/computersarecool/WH3hR/9/

cap2.transform('t100.5,213.7' );
//this only moves the element that far **from its initial position** not to an absolute pos

Thanks for any help.

Answer 1

Looks familiar, you can get the bounding box of the object and use that, with getBBox(), then use the Snap touchevents, like touchstart

Snap.load("https://dl.dropboxusercontent.com/u/57988096/ss4.svg", function (f) {
    s.append(f);
    cap = Snap.select('#Capper');
});

function move(dx,dy) {
    cap.transform('t' + (xcord - dx) + ',' + (ycord - dy ) );
}

document.onclick = function ( ev ) {
    var bb = cap.getBBox();
    move( bb.x + bb.width/2, bb.y + bb.height/2 ); // get the centre point of the object to move
}

jsfiddle here