在 svg 中旋转和移动线条

Question

我想在围绕自身中心旋转的同时左右移动一条线。

使用矩形非常容易，因为您有 x、y 和高度和宽度。 虽然有一条线我似乎无法弄清楚。

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

我可以通过编辑旋转的第一个值来轻松地旋转我的线

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

同时移动我的对象有一种向下的冲动，虽然它应该是直线的。

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));

我怎样才能使我的线笔直移动并保持围绕其中心旋转的能力。

Answer 1

注意旋转变换的第二个参数恰好是 (x2 + x1) /2，第三个参数是 (y1 + y2) / 2，即直线的中心点。

你所要做的就是在更新行位置时更新 transform 属性。