I have been exploring ways to selectively move one end of a line, but I am encountering difficulties as it keeps altering the container and ultimately redrawing the entire line.
Here is a JSFiddle link for reference: https://jsfiddle.net/h2nwygu8/1/
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Review Race</title>
</head>
<body>
<div class="wrapper">
<section>
<h1>Line Test</h1>
<div id="canvas" style="width: 960px; height:410px; border: 4px solid lime;">
<svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; top:95px; width:960px; height:410px;">
<line id="start_line" x1="10" y1="0" x2="10" y2="960" style="stroke:rgb(255,0,0);stroke-width:3;" />
</svg>
</div>
</section>
</div>
</body>
</html>
And here is the JavaScript code:
function moveTopLineEnd(event) {
var line = document.getElementById('start_line');
posY = event.clientY;
posX = event.clientX;
line.setAttribute("y1", posY)
line.setAttribute("x1", posX)
}
document.addEventListener("click", moveTopLineEnd);
My goal is to have the top edge of the red line follow the mouse cursor's position over the green box while keeping the bottom end fixed. However, the issue arises from the containers changing with each click, causing the entire line to move. Additionally, there are inconsistencies in the offsets between the mouse cursor and the line. The only requirement is that the line should overlay the green boundary container.
Can anyone suggest the most effective approach to achieve this? Thank you.