旋转和移动 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，即线的中心点。

您所要做的就是在更新行位置时更新变换属性。

旋转和移动 svg 中的线

Rotate and move line in svg

html

css

svg

rotation