移动旋转的 SVG 元素

Posted 2023-02-16

【中文标题】移动旋转的 SVG 元素

【英文标题】：move rotated SVG element

【发布时间】：2015-10-03 02:47:09

【问题描述】：

所以，我有一个 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"   style="fill:red;stroke-width:3;stroke:blue"></rect>
    </g>
 </svg>
</svg>

链接到 jsdfiddle：https://jsfiddle.net/es179Lzn/1/

谢谢

【问题讨论】：

诀窍是绘制以 Origin (0,0) 为中心的框，然后使用 rotate(degree) 和 translate(x,y)。如果你只是想动画旋转，试试这个：jsfiddle.net/alkhoo/JwkYm/18

【参考方案1】：

嗯，经过几天的工作，我明白了。似乎我这样做的方式是正确的，但它会导致 transform-origin: '50% 50%' 属性出现奇怪的行为。我刚刚删除了它，一切正常。 （有一些错误，但问题中的问题已解决）。

所以我把答案留在这里。