我正在為一個機器人手臂設計一個web界面，我需要一種方法在HTML div元素中的點之間畫線，給定一個起點(x，y)和一個終點(x，y)。我寧愿不使用畫布，因為我需要線條本身就是元素(它們應該有onclick事件和CSS樣式)。也許和SVG有關？請注意，這與這樣的問題不同，因為那個問題試圖連接元素，而我試圖連接元素內部的點。

<div id="somediv">
    <!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
</div>

如果我可以基于一個點和一個角度來創建線，這實際上是更好的，但是將它轉換成兩個點的數學方法很簡單。

這里的基本思想是將SVG放在DIV元素的頂部，使DIV位置相對，而SVG絕對來做這件事。然后你可以畫SVG到任何你喜歡的x/y點。

正如所料，像click這樣的事件與SVG一起工作，嘗試單擊該行，然后雙擊黃色框。

示例->；

document.querySelector('#theline').
  addEventListener('click', 
    () => alert("line clicked"));

document.querySelector('#somediv').
  addEventListener('dblclick', 
    () => alert('box double clicked'));

#somediv {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
}

#svg {
  position: absolute;
  top: 0px;
  left: 0px;
}

<div id="somediv">
    <!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
   <svg id="svg" width="100" height="100"> 
      <line 
        style="cursor:pointer"
        id="theline" 
        x1="23" y1="24" x2="87" y2="96" stroke="black" stroke-width="4"/>
   </svg>
</div>

我修改了@Keith的答案，使其成為一個在元素中的給定點之間畫一條線的函數:

function drawLine(x1, y1, x2, y2, line_class,     element=document.documentElement) {
            element.innerHTML += `<svg><line class=${line_class} x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"/></svg>`
}

drawLine(20, 25, 89, 78, "line", document.getElementById("adiv"))

.line {
    stroke-width: 5px;
    stroke: black;
}
#adiv {
    height: 100px;
    width: 100px;
    background-color: blue;
}

<div id="adiv">
</div>