我一直在试图找出一种方法来只移动一条线的一端，但它不断改变容器，从而重新绘制整条线并移动它。
这是一个 js fiddle :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);
我还删除了 Canvas 元素上的顶部和位置声明，这些声明导致线条延伸超过底部的绿色边框。
最后，我将点击监听器更改为在 Canvas 元素上，这样您就可以使用事件的 offsetX 和 offsetY 来定位与 Canvas 元素相关的线，这就是路径坐标映射到的位置首先。
使用 clientX 和 clientY 位置尝试将其放置在与页面相关的位置，这与您希望它在 Canvas 上的位置不一致。
实际上您仍然可以使用 clientX 和 clientY 位置，您只需补偿 Canvas 元素相对于页面的 x 和 y 位置。您可以使用 Element.getBoundingClientRect() 找到这些.参见 https://jsfiddle.net/th0aLcx0/举个例子。
关于javascript - HTML 和 SVG 如何用鼠标单击只移动一条线的一个端点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50205021/