SVG rotation using Javascript

Question

I have created an SVG image in an HTML page, and now I want to move the SVG shapes about using JavaScript buttons. The JSFiddle for my application is here : http://jsfiddle.net/johndavies91/xwMYY/

The buttons have been displayed but their functions aren't being displayed upon clicking the buttons.

The functions' codes are as follows;

function rotatex() {
document.getElementById("inner-arrow").setRotate(45,NativeCenterX,NativeCenterY)
}
function rotatey() {
document.getElementById("middle-arrow").setRotate(45,NativeCenterX,NativeCenterY)
}
function rotatez() {
document.getElementById("outer-arrow").setRotate(45,NativeCenterX,NativeCenterY)
}

and their corresponding buttons;

<input id="button1" type="button" value="Rotate Inner Short Arrows 45*"
        onclick="rotatex()"/>
<input id="button1" type="button" value="Rotate Middle Short Arrows 45*"
        onclick="rotatey()"/>
<input id="button1" type="button" value="Rotate Outer Short Arrows 45*"
        onclick="rotatez()"/>

I am trying to rotate them around the shapes' origin. Could someone explain to me why this code isn't working. Thanks

Answer 1

See updated fiddle here: http://jsfiddle.net/2da4B/

This uses .setAttribute("transform", "rotate(45)") instead of setRotate:

function rotatex() {
    var innerArrow = document.getElementById("inner-arrow");
    innerArrow.setAttribute("transform", "rotate(45)");
}

This rotates 45 degrees around the 0,0 origin - it's not clear from your question whether that's what you're looking for.