如何繪製從一個元素到另一個元素的線

我正在創建一個類似於結構的樹。我使用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

如何繪製從一個元素到另一個元素的線

回答

相關問題