CODEWITHSUNDEEP
javascripthtmlcssbuttonsvg
JRD91
JRD91

Reputation: 139

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

Upvotes: 11

Views: 25719

Answers (3)

nrabinowitz
nrabinowitz

Reputation: 55678

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.

Upvotes: 17

Francis Hemsher
Francis Hemsher

Reputation: 3488

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

Upvotes: -1

bovino Marcelo Bezerra
bovino Marcelo Bezerra

Reputation: 2062

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.

Upvotes: -2

Related Questions