How do I rotate or scale (transform) an SVG path relative to its center point?

Question

I\'m trying to rotate and scale shapes within an SVG around their center point. I\'ve looked into several libraries, including Jquery, Greensock, D3, RaphaelJS, but I haven\

Answer 1

I've been looking for a long time, and will settle for the following.

1. Design your svg shape at coordinate x:0,y:0.

2. Identify by hand the center of rotation, by example, center = [ x:50,y:100].

3. Build a spinIt() function such :

function spinIt() {
    needle.transition()
        .duration(2000)
        .attrTween("transform", tween);
    function tween() {
        return d3.interpolateString("rotate(-180, 50, 100)", "rotate(90, 50, 100)");
    }
}

4. Use it on a triger:

svg.on("click", spinIt);

http://jsfiddle.net/SHF2M/79/