html - SVG rotation using Javascript

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 : /

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

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

Share Improve this question asked Apr 16, 2014 at 3:09 JRD91 1391 gold badge1 silver badge9 bronze badges

Did you ever succeed using setRotate()? If there is browser support for it I believe it's quite recent, but you can always use setAttribute('transform','rotate(...)') with the same result. – helderdarocha Commented Apr 16, 2014 at 3:33
I tested your fiddle and it seems that your JS is not executing because rotatex is undefined (turn on the JavaScript console in your browser to see these errors). If will fork if you place it in the <head> (see how this working JFiddle is configured) – helderdarocha Commented Apr 16, 2014 at 3:38

Add a comment |

3 Answers 3

Sorted by: Reset to default 17

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.

Try changing id's by replacing -(dash) with _ (underscore).

I would suggest you to use external library for SVG works. For example - Raphaël. .

Here is the link http://raphaeljs.com . With help of this lib you will easily be able to complete your task.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - SVG rotation using Javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)