移动旋转的SVG元素
move rotated SVG element
那么,我有一个SVG矩形,我可以移动到鼠标位置,使用mouseonmove。
它工作得很好,但是当我来旋转它时,运动很好,但是它有一个基于旋转角度的奇怪偏移。我猜cos/sin代码有问题,但我不知道哪里出了问题。
var container = document.getElementById("container");
var rect = document.getElementById("rect");
var grados = document.getElementById("grados");
var group = document.getElementById("group");
grados.addEventListener("change",rotate);
container.addEventListener("mousemove", move);
var angle = 0;
var radian = angle * Math.PI / 180;
var cos = Math.cos(radian);
var sin = Math.sin(radian);
function move(e){
var x = ((e.offsetX * cos) + (e.offsetY * sin));
var y = ((-e.offsetX * sin) + (e.offsetY * cos));
rect.setAttribute('x',x);
rect.setAttribute('y',y);
}
function rotate(e){
console.log(e);
group.style.transform='rotate('+e.target.value+'deg)';
angle = e.target.value;
radian = angle * Math.PI / 180;
cos = Math.cos(radian);
sin = Math.sin(radian);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ROTATE<input id="grados" type="number" value="1">
<svg id="container"style="width: 400px;height:400px;border:1px solid black;">
<svg>
<g id="group"style="transform:rotate(0deg);transform-origin:50% 50%;">
<rect id="rect" x="20" y="5" width="50px" height="50px" style="fill:red;stroke-width:3;stroke:blue"></rect>
</g>
</svg>
</svg>
链接到jsdfiddle: https://jsfiddle.net/es179Lzn/1/
谢谢
好吧,经过几天的工作,我明白了。看起来我这样做是对的,但它会导致transform-origin: '50% 50%'
性质的奇怪行为。我只是把它取下来,一切都正常了。(有一些bug,但是问题已经解决了)
所以我把答案留给以后。
相关文章:
- 锚点元素不't使用svg时,请打开EDGE上的href
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 在select元素中显示highchart dashstyle(svg)
- 如何自动保存动态生成的HTML SVG元素
- 使用svg和javascript将一个类的元素动画化为另一个类
- 将包含SVG元素的HTML转换为图像文件
- SVG元素——处理和选择文本
- 更改SVG'style'元素
- SVG元素在转换后会丢失事件侦听器
- 获取以屏幕像素为单位的旋转SVG元素的边界
- 使用JavaScript查找具有特定属性的SVG元素
- 如何使用正则表达式按类获取svg元素
- d3与svg在处理元素时的对比
- 是否可以在不创建svg对象的情况下创建捕捉元素?[snap.svg]
- 将SVG元素拖动到另一个SVG元素上
- 捕捉.svg — 单击其中一个元素时删除对象
- 单击事件在替换<使用>元素在<svg>(Win7/IE11)
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 在元素 SVG 中使用 JavaScript 或 jQuery 进行事件单击
- 是否有一种方法可以使用Javascript合并两个路径元素(svg)