从一个元素到另一个元素画一条线

Question

我想画一条可以设置样式的线，它从一个 <td> 元素的中心位置开始，到另一个 <td> 元素的中心位置结束。

我已经尝试使用 jQuery Connections plugin，但它连接的是元素的边缘，而不是中心位置。

This plugin 会像这样简单地工作：

$('#start').connections({
  to: '#end',
  'class': 'related'
});

我希望它以同样的方式工作。（或类似的方式）

另外，当我使用 jQuery Connections plugin 时，连接线显然没有出现。

Answer 1

一个解决方案是在你的 td 中使用额外的项目并使用 display flex 和 align center，像这样：

<div>
  1
  <span class="line"></span>
</div>

然后：

div {
 display: flex;
 align-items: center;
 width: 100%;
}
.line {
  border-bottom: 1px solid #000;
  width: 100%;
  display: inline-block;
}

这里是工作示例，但是您需要根据自己的需要对其进行调整，但它应该可以完成工作：https://codepen.io/anon/pen/ewWgpV

Answer 2

折腾了半天，终于找到解决办法了。在这两个元素上使用 getBoundingClientRect()，然后创建一个 SVG 线条元素。 SVG固定在window的左上角，可以用pointer-events: none;.

点击

var b1 = document.getElementById('btn1').getBoundingClientRect();
var b2 = document.getElementById('btn2').getBoundingClientRect();
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttribute('id', 'line1');
newLine.setAttribute('x1', b1.left + b1.width / 2);
newLine.setAttribute('y1', b1.top + b1.height / 2);
newLine.setAttribute('x2', b2.left + b2.width / 2);
newLine.setAttribute('y2', b2.top + b2.height / 2);
newLine.setAttribute('style', 'stroke: black; stroke-width: 2;');
document.getElementById("fullsvg").append(newLine);

#btn1 {
  margin-left: 50px;
  margin-bottom: 5px;
}

#btn2 {
  margin-left: 150px;
}

#fullsvg {
  left: 0px;
  top: 0px;
  position: fixed;
  margin: 0;
  pointer-events: none;
}

<input type="button" id="btn1" class="btn" value="button1"><br>
<input type="button" id="btn2" class="btn" value="button2">
<svg id="fullsvg"></svg>

从一个元素到另一个元素画一条线

Draw a line from one element to another

html

javascript

jquery

dom

shapes