如何绘制从一个元素到另一个元素的线

我正在创建一个类似于结构的树。我使用html徽章在圈内创建了数字。现在我想从一个元素画线到另一个元素。我曾尝试使用像左对角线和右对角线的图像。但它不起作用。如何绘制从一个元素到另一个元素的线

这是我创建的HTML徽章：

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<span id="0" class="cl w3-badge">0</span><br><br><br><br> 
<span id="1" class="cl w3-badge">0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<span id="2" class="cl w3-badge">0</span>

这是我的javascript：

var data = []; 
data.push(5); 
data.push(6); 
data.push(4); 
$('.w3-badge').each(function(i, obj) { 
document.getElementById(i).innerHTML = data[i]; 
});

This is image of left line

有人能帮助我吗？

我试图让我的最终的树是这样的： Final tree

来源

2017-04-14 toni

首先，不要使用' '和''
的间距;这就是CSS的用途。您将需要使用[canvas元素]（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial）进行研究。 –

使用SVG是为那些之类的话，最好的选择我下面写一个函数，正是你需要的做的。你需要重写它以满足你的需求。
使用整个页面查看结果。

function drawLine(div1, div2){ 
 
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
 
svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
 
var div1Offset = div1[0].getBoundingClientRect(); 
 
var div2Offset = div2[0].getBoundingClientRect(); 
 
      var pathNr = ""; 
 
      pathNr = "M"+ (div1Offset.width + div1Offset.left)+ " " + ((div1Offset.top + div1Offset.height)/2) 
 
      pathNr += "h" +(div2Offset.left) 
 
      pathNr += "v" +(div2Offset.top) 
 
      pathNr += "h" +(-div2Offset.left) 
 
      svgPath.setAttribute("d", pathNr); 
 
      svgPath.setAttribute("stroke", "red"); 
 
      svgPath.setAttribute("stroke-width", "1"); 
 
      svgPath.setAttribute("fill", "white"); 
 
      svgPath.setAttribute("id", "test"); 
 
      svg.appendChild(svgPath); 
 
      $("body").append(svg); 
 

 
} 
 

 
$(document).ready(function(){ 
 

 
drawLine($(".box_1"), $(".box_2")) 
 

 
});

.box{ 
 
width:150px; 
 
height:150px; 
 
margin:30px; 
 
background:black; 
 

 
} 
 

 
svg{ 
 
position:absolute; 
 
left:0; top:0; 
 
width:100%; 
 
height:100%; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box box_1'></div> 
 

 

 
<div class='box box_2'></div>

来源

2017-04-14 18:18:03

如何绘制从一个元素到另一个元素的线

回答

相关问题