Rotate элемент линии вокруг центра

Question

Поэтому я хочу, чтобы повернуть мою SVG> линейного элемента в JavaScript, но вращение должно быть вокруг его центра + длина линии должна оставаться такими же

Оставаясь длиной линии является проблема сейчас

Мой элемент:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" 
      stroke="black"> 
    </line> 
</svg> 

И это мой JavaScript:

var rotateJump = 10; 
var line = document.getElementById("line"); 
function rotate() { 
    line.setAttribute("y1", parseInt(line.getAttribute("y1")) - rotateJump); 
    line.setAttribute("y2", parseInt(line.getAttribute("y2")) + rotateJump); 
} 
rotate(); 

Как правильно поворачивать поддерживающую длину линии? Он становится больше при стоянии справа Длина горизонтальной горизонтальной длины должна быть максимальной длины.

Любые советы в правильном направлении о том, как я должен подходить к этому?

Answer 1

Как указано в моем комментарии, используя transform это лучший вариант, если строка не нужно менять исходные координаты, но это не всегда может быть случай (например, вы» нужно будет вычислить столкновение другого объекта с повернутой линией позже).

Что вы действительно ищете, так это то, как нарисовать диаметр круга с радиусом в половину длины вашей линии и центральной точкой в ​​середине линии, учитывая угол, на котором должен быть нарисован диаметр. Или другими словами: как найти точку на окружности круга с учетом радиуса и угла.

Так что с учетом вашей линии вы можете получить центр (60, 100) и радиус (40).

Тогда можно вычислить x1, y1 и x2, y2, которые являются точками на окружности:

var line = document.getElementById("line"); 
 
var centerX = 60, centerY = 100, radius = 40, angle = 0; 
 
var rotate = function(angle){ 
 
    var x1, y1, x2, y2; 
 
    \t x1 = centerX + radius * Math.cos(angle); 
 
    y1 = centerY + radius * Math.sin(angle); 
 
    x2 = centerX - radius * Math.cos(angle); 
 
    y2 = centerY - radius * Math.sin(angle); 
 
    
 
    line.setAttribute('x1', x1); 
 
    line.setAttribute('y1', y1); 
 
    line.setAttribute('x2', x2); 
 
    line.setAttribute('y2', y2); 
 
} 
 
// animation 
 
setInterval(function(){ 
 
    angle += .1; 
 
    rotate(angle); 
 
},100);

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" 
 
      stroke="black"> 
 
    </line> 
 
</svg>

Answer 2

Установка атрибута преобразования с помощью вращения() должна быть способ перехода.
Поворот принимает 3 аргумента [степень] [originX] [originY]
В приведенном ниже примере я помещаю его в интервал, чтобы код повторялся, и вы можете видеть живое вращение.

var rotateJump = 10; 
 
var line = document.getElementById("line"); 
 

 
var i = 0; 
 
setInterval(function() { 
 
    i += 2; 
 
    line.setAttribute("transform", "rotate(" + i + ", 100, 100)"); 
 
}, 25);

<svg width="300px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200"> 
 
    <circle cx="100" cy="100" r="80" fill="firebrick"></circle> 
 
    <line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line> 
 
</svg>