在svg中旋转和移动线 [英] Rotate and move line in svg

问题描述

我想向左右移动一行，同时围绕自己的中心旋转。

I want to move a line left and right while rotating around its own center.

使用矩形是非常容易的，因为你有ax，y和高度和宽度。

With a rect it's extremely easy since you have a x, y and height and width. Although with a line I can't seem to figure it out.

<line id='line' x1='20' y1='100' x2='180' y2='100' stroke-width='2' stroke='black' transform='rotate(410, 100, 100)'></line>

我可以通过编辑rotate

I can easily rotate my line by editing the first value of the rotate

现在，只要我移动我的线，旋转不再正常工作，不绕其中心旋转。

Now as soon as I move my line the rotation doesn't work properly anymore and doesn't rotate around its center.

this.lineObject.setAttribute("x2", parseInt(this.lineObject.getAttribute("x2")) + step);
this.lineObject.setAttribute("x1", (parseInt(this.lineObject.getAttribute("x2")) - 160)); //160 is the length of the line.
this.lineObject.setAttribute("y2", (parseInt(this.lineObject.getAttribute("y2")) - step));
this.lineObject.setAttribute("y1", (parseInt(this.lineObject.getAttribute("y1")) - step));

如何直线移动我的线？

How can I move my line straight & maintain the ability to rotate around its center.

推荐答案

请注意旋转变换的第二个参数是什么是（x2 + x1 ）/ 2，第三个参数是（y1 + y2）/ 2即行的中心点。

Notice how the second argument of the rotate transform happens to be (x2 + x1) /2 and the third argument is (y1 + y2) / 2 i.e. the centre point of the line.

所有你需要做的是更新transform属性更新行位置。

All you have to do is update the transform attribute when you update the line position.

这篇关于在svg中旋转和移动线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！