在我的页面上，我有一组 div 元素，它们应该与如下图所示的线条连接。我知道使用画布我可以在这些元素之间画线，但是是否可以在 html/css 中以另一种方式做到这一点？
如何将 HTML Divs 与 Lines 连接起来？
IT技术
javascript
jquery
html
css
2021-02-10 18:19:42
6个回答
您可以使用 SVG 仅使用 HTML 和 CSS 连接两个 div：
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>
（请使用单独的 css 文件进行样式设置）
创建一个 svg 行并使用此行连接上面的 div
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
在哪里，
x1,y1 表示第一个 div 的中心，
x2,y2 表示第二个 div 的中心
您可以在下面的代码段中查看它的外观
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>function adjustLine(from, to, line){
var fT = from.offsetTop + from.offsetHeight/2;
var tT = to.offsetTop + to.offsetHeight/2;
var fL = from.offsetLeft + from.offsetWidth/2;
var tL = to.offsetLeft + to.offsetWidth/2;
var CA = Math.abs(tT - fT);
var CO = Math.abs(tL - fL);
var H = Math.sqrt(CA*CA + CO*CO);
var ANG = 180 / Math.PI * Math.acos( CA/H );
if(tT > fT){
var top = (tT-fT)/2 + fT;
}else{
var top = (fT-tT)/2 + tT;
}
if(tL > fL){
var left = (tL-fL)/2 + fL;
}else{
var left = (fL-tL)/2 + tL;
}
if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){
ANG *= -1;
}
top-= H/2;
line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';
line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';
line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';
line.style["-o-transform"] = 'rotate('+ ANG +'deg)';
line.style["-transform"] = 'rotate('+ ANG +'deg)';
line.style.top = top+'px';
line.style.left = left+'px';
line.style.height = H + 'px';
}
adjustLine(
document.getElementById('div1'),
document.getElementById('div2'),
document.getElementById('line')
);#content{
position:relative;
}
.mydiv{
border:1px solid #368ABB;
background-color:#43A4DC;
position:absolute;
}
.mydiv:after{
content:no-close-quote;
position:absolute;
top:50%;
left:50%;
background-color:black;
width:4px;
height:4px;
border-radius:50%;
margin-left:-2px;
margin-top:-2px;
}
#div1{
left:200px;
top:200px;
width:50px;
height:50px;
}
#div2{
left:20px;
top:20px;
width:50px;
height:40px;
}
#line{
position:absolute;
width:1px;
background-color:red;
}
<div id="content">
<div id="div1" class="mydiv"></div>
<div id="div2" class="mydiv"></div>
<div id="line"></div>
</div>
您可以使用https://github.com/musclesoft/jquery-connections。这允许您连接 DOM 中的块元素。
定位有点1px麻烦，但是您可以使用宽 div 作为线条和位置并适当地旋转它们。
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
.box {
border: 1px solid black;
background-color: #ccc;
width: 100px;
height: 100px;
position: absolute;
}
.line {
width: 1px;
height: 100px;
background-color: black;
position: absolute;
}
#box1 {
top: 0;
left: 0;
}
#box2 {
top: 200px;
left: 0;
}
#box3 {
top: 250px;
left: 200px;
}
#line1 {
top: 100px;
left: 50px;
}
#line2 {
top: 220px;
left: 150px;
height: 115px;
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
}
使用任意数量的库和/或 HTML5 技术绝对可能。您可以通过使用诸如 border-bottom 属性之类的东西在纯 CSS 中将某些东西组合在一起，但这可能会非常糟糕。
如果您对此很认真，则应该查看用于画布绘图或 SVG 的 JS 库。例如，像http://www.graphjs.org/或http://jsdraw2dx.jsfiction.com/
其它你可能感兴趣的问题