我一直在试图找出一种方法来移动一行的一端，但它不断更改容器，从而重新绘制整行并移动它。
这是一个js小提琴：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>
和JavaScript：
function placeLine(e) {
var d = document.getElementById('start_line');
posY = e.clientY;
posX = e.clientX;
d.setAttribute("y1", posY)
d.setAttribute("x1", posX)
}
document.addEventListener("click", placeLine);
我想做的是让红线的顶部在绿色框上移动到鼠标 x，y 位置。 行的底部不应移动。 然而，每次点击时，容器都在改变和移动整条生产线。 您还可以看到鼠标 x，y 和线条的偏移量存在一些问题。 唯一的限制是，该线需要能够用绿色边界覆盖在容器的顶部。
最好的方法是什么？ 谢谢。
您混淆了 x2 和 y2 属性的高度和宽度。如果您将 y2 更改为等于您的身高 (410px)，它应该开始更像您期望的那样工作。
请参阅：https://jsfiddle.net/zukrtpyg/。
.HTML：
<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="width:960px; height:410px;">
<line id="start_line" x1="0" y1="0" x2="0" y2="410" style="stroke:rgb(255,0,0);stroke-width:3;" />
</svg>
</div>
Javascript：
function placeLine(e) {
var d = document.getElementById('start_line');
posY = e.offsetY;
posX = e.offsetX;
d.setAttribute("y1", posY)
d.setAttribute("x1", posX)
}
document.getElementById('canvas').addEventListener("click", placeLine);
我还删除了画布元素上的顶部和位置声明，这些声明导致线条延伸到底部的绿色边框之外。
最后，我将单击侦听器更改为在画布元素上，这样您就可以使用事件的 offsetX 和 offsetY 来定位相对于画布元素的行，这是路径坐标首先映射到的位置。
使用 clientX 和 clientY 位置会尝试将其相对于页面放置，这不会与您希望它在画布上的位置映射。
您实际上仍然可以使用 clientX 和 clientY 位置，您只需用 canvas 元素相对于页面的 x 和 y 位置进行补偿。您可以使用 Element.getBoundingClientRect() 找到这些内容。有关示例，请参阅 https://jsfiddle.net/th0aLcx0/。