使用 Javascript 旋转 SVG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23098309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG rotation using Javascript
提问by JRD91
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/
我在 HTML 页面中创建了一个 SVG 图像，现在我想移动有关使用 JavaScript 按钮的 SVG 形状。我的应用程序的 JSFiddle 在这里：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
我试图围绕形状的原点旋转它们。有人可以向我解释为什么此代码不起作用。谢谢
回答by nrabinowitz
See updated fiddle here: http://jsfiddle.net/2da4B/
在此处查看更新的小提琴：http: //jsfiddle.net/2da4B/
This uses .setAttribute("transform", "rotate(45)")instead of setRotate:
这使用.setAttribute("transform", "rotate(45)")代替setRotate：
function rotatex() {
var innerArrow = document.getElementById("inner-arrow");
innerArrow.setAttribute("transform", "rotate(45)");
}
This rotates 45 degrees around the 0,0origin - it's not clear from your question whether that's what you're looking for.
这会围绕0,0原点旋转 45 度- 从您的问题中不清楚这是否是您要寻找的。
回答by Francis Hemsher
Try changing id's by replacing -(dash) with _(underscore).
尝试通过将-（破折号）替换为_（下划线）来更改 ID 。
回答by Marcelo Bezerra
I would suggest you to use external library for SVG works. For example - Rapha?l. .
我建议您将外部库用于 SVG 作品。例如 - 拉斐尔？.
Here is the link http://raphaeljs.com. With help of this lib you will easily be able to complete your task.
这是链接http://raphaeljs.com。在这个库的帮助下，您将能够轻松完成您的任务。
