使用Javascript进行SVG旋转

Question

我在HTML页面中创建了一个SVG图像,现在我想使用JavaScript按钮移动SVG形状.我的应用程序的JSFiddle在这里:http://jsfiddle.net/johndavies91/xwMYY/

已显示按钮,但单击按钮时不显示其功能.

功能代码如下;

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)
}

和他们相应的按钮;

<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()"/>

我试图围绕形状的原点旋转它们.有人可以向我解释为什么这段代码不起作用.谢谢

Answer 1

请看这里更新的小提琴:http://jsfiddle.net/2da4B/

这使用.setAttribute("transform", "rotate(45)")而不是setRotate:

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

它围绕0,0原点旋转45度- 从您的问题中不清楚这是否是您正在寻找的.