[SVG/DOM] Rotate by following mouse

[CptRick]

Hiho,

I'm working with SVG and DOM since two days now and the implementation of a drag and drop feature went quite well.
Now I want the SVG Object to rotate by following the mouse.

My approach is to get the position of the mouse and the center of the object and calculate the angle.

My code does not work and I'm not quite sure why.


var svgDocument=null;
var O=null;
var svgns = 'http://www.w3.org/2000/svg';
var xlinkns = 'http://www.w3.org/1999/xlink';

//Array of moveable objects
var objects=new Array("frame")

var finalX=new Array()
var finalY=new Array()

function startup(evt){
O=evt.target
svgDocument=O.ownerDocument
for (i in objects) {
finalX[objects[i]]=0
finalY[objects[i]]=0
if (objects[i].charAt(0)=="I"){
clip=svgDocument.getElementById(objects[i].charAt(1)).getAttribute("transform")
finalX[objects[i].charAt(1)]=clip.split(/[\(\ \)]/)[1]
finalY[objects[i].charAt(1)]=clip.split(/[\(\ \)]/)[2]
}
svgDocument.getElementById(objects[i]).setAttribute("onmousedown","trap_rotate(evt)") //Start on mouse click (down)
}
}



function trap_rotate(evt){
id=evt.currentTarget.id
x=evt.clientX;
y=evt.clientY;
if (id.charAt(0)=="I") id=id.charAt(1)
offsetx=x-finalX[id]
offsety=y-finalY[id]
O.setAttribute("onmousemove","rotation(evt,'"+id+"',"+offsetx+","+offsety+")") // Update while rotating
O.setAttribute("onmouseup","O.setAttribute('onmousemove',null)") //Stop at click (up)
}

function rotation(e,i,x,y){
o=svgDocument.getElementById(i)
r=Math.tan((e.clientx - x)/(e.clienty - y))
o.setAttribute("transform","rotate("+r+")")
finalX[i]=e.clientX - x
finalY[i]=e.clientY - y
}

Has anyone an idea why it's not working or maybe a better approach?

[CptRick]

Found it!:o

r=Math.tan((e.clientx - x)/(e.clienty - y))

It has to be a capital letter after e.client.