使用Javascript进行SVG旋转

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.

Answer 2

尝试通过用_ （下划线）替换- （破折号）来更改id。

Answer 3

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.