javascript - 使用 Javascript 的 SVG 旋转

Question

我在 HTML 页面中创建了一个 SVG 图像，现在我想移动 SVG 形状关于使用 JavaScript 按钮。我的应用程序的 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

请在此处查看更新的 fiddle :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 度 - 从您的问题中不清楚这是否是您要查找的内容。