SVG rotation using Javascript

button, css, html, javascript, svg

Solution

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.

Problem

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

Original source