围绕中心旋转线元素

Question

So I want to rotate my svg > line element in javascript but the rotation needs to be around its center + the length of the line has to remain the same

Remaining the line length is the problem right now

My element:

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

And this is my 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();

How to properly rotate maintaining line length? It gets bigger when standing up right The length it has laying horizontal should be the max length it has.

Any tips in to the right direction on how I should approach this?

Answer 1

Setting the transform attribute with rotation() should be the way to go.
Rotate takes 3 arguments [degree] [originX] [originY]
In the example below i put it in a interval so the code repeats and you can see a live rotation.

 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> 

Answer 2

As stated in my comment using transform is the best option if the line doesn't need to change the original coordinates, but it may not always be the case (for example you'll need to calculate collision of another object with the rotated line later).

What you're really looking for is how to draw a diameter of a circle with a radius of half you line's length and the center point in the middle of the line, given an angle at which the diameter should be drawn. Or in other words: how to find a point on a circle's circumference given the radius and angle.

So given your line you can get the center ( 60, 100 ) and radius ( 40 ).

Then you can calculate x1, y1 and x2, y2 which are points on a circle:

 var line = document.getElementById("line"); var centerX = 60, centerY = 100, radius = 40, angle = 0; var rotate = function(angle){ var x1, y1, x2, y2; 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>