Drag to rotate an SVG:g group

Question

My goal is to have an svg:ellipse with four control points that you can use to resize and rotate. My code works fine if the rotation transform is applied to the ellipse itself, but I want to apply the rotation to a container svg:g so that the control points rotate simultaneously without lots of extra code. When I apply the transform to the group, the rotation misbehaves I assume because I'm not thinking of the transformed coordinates properly.

See here: http://jsfiddle.net/PbKYn/3/

Notice that the angle flickers between a positive and negative value near beginning of the rotation and that a 2pi rotation of the mouse only rotates the shape 1pi. (I don't think my angleBetweenPoints function is wrong though, because if I apply the rotation to the <ellipse> and not the <g>, the rotation is perfect.)

What am I doing wrong? Thanks-

Answer 1

http://jsfiddle.net/PbKYn/5/

The fix was changing the rotation angle from angleBetweenPoints to currentAngle + angleBetweenPoints (pseudo). I think that means that after the rotation is applied, the coordinates were also transformed such that angleBetweenPoints was essentially giving dTheta instead of theta. Le sigh.