使用Javascript进行SVG旋转 [英] SVG rotation using Javascript

问题描述

我已经在HTML页面中创建了SVG图像，现在我想移动有关SVG形状的信息JavaScript按钮.我的应用程序的JSFiddle在这里: http://jsfiddle.net/johndavies91/xwMYY/

按钮已显示，但单击按钮后未显示其功能.

功能代码如下；

 函数rotatex(){document.getElementById("inner-arrow").setRotate(45，NativeCenterX，NativeCenterY)}函数rotatey(){document.getElementById("middle-arrow").setRotate(45，NativeCenterX，NativeCenterY)}函数rotatez(){document.getElementById("outer-arrow").setRotate(45，NativeCenterX，NativeCenterY)} 

及其对应的按钮；

 <输入id ="button1" type ="button" value =旋转内部短箭头45 *"onclick ="rotatex()"/>< input id ="button1" type ="button" value =旋转中间短箭头45 *"onclick ="rotatey()"/>< input id ="button1" type ="button" value =旋转外部短箭头45 *"onclick ="rotatez()"/> 

我正在尝试将它们绕形状的原点旋转.有人可以向我解释为什么此代码无法正常工作.谢谢

解决方案

在此处查看更新的小提琴: http://jsfiddle.net/2da4B/

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

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

这绕着 0,0 的原点旋转45度-您的问题尚不清楚这是否是您要查找的内容.

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

解决方案

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.

这篇关于使用Javascript进行SVG旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！