使用Javascript进行SVG旋转

JRD91

我已经在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()"/>

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

纳拉布诺维茨

在这里查看更新的小提琴: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度-从您的问题中尚不清楚这是否是您要的内容。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用变量旋转SVG

来自分类Dev

使用香草JavaScript将SVG矩形绕其中心旋转

来自分类Dev

对数旋转:使用多个条件进行旋转

来自分类Dev

使用javascript旋转div

来自分类Dev

使用动画变换旋转地球svg

来自分类Dev

使用组元素旋转SVG圆

来自分类Dev

使用CSS旋转和裁剪svg背景

来自分类Dev

使用Snap.svg的基本旋转

来自分类Dev

通过mousemove / touchmove错误进行SVG角度旋转

来自分类Dev

使用javascript比较旋转的图像

来自分类Dev

使用imagemagick进行PDF文件的无损旋转

来自分类Dev

使用skimage旋转图像而不进行裁剪

来自分类Dev

使用OpenCV在C中进行图像旋转

来自分类Dev

使用imagemagick进行PDF文件的无损旋转

来自分类Dev

javascript:如何使用javascript旋转文本?

来自分类Dev

使用javascript旋转和取消旋转图像onClick

来自分类Dev

如何使用JavaScript对图像进行动画处理使其在HTML5画布中旋转?

来自分类Dev

使用SVG animateTransform旋转SVG中翻译后的SVG中的路径

来自分类Dev

使用JavaScript的SVG裁剪

来自分类Dev

使用Google Maps API旋转SVG符号以匹配飞机航向

来自分类Dev

如何使用按钮使某些Croppie JavaScript旋转

来自分类Dev

如果需要使用javascript旋转图像

来自分类Dev

单击后使用JavaScript旋转图像

来自分类Dev

使用JavaScript旋转画布中的文本

来自分类Dev

如何使用CSS和JavaScript旋转图片

来自分类Dev

如何使用JavaScript来回旋转图像

来自分类Dev

如何使用CSS或JavaScript旋转图片

来自分类Dev

SVG图像元素旋转

来自分类Dev

SVG旋转路径