Вращать и перемещать линию в 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, то есть центральная точка линии.

Все, что вам нужно сделать, это обновить атрибут преобразования при обновлении позиции строки.