Question

我正在创建一个类似树的结构。我使用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

Answer 1

使用svg是这类事情的最佳选择，我在下面编写了一个功能，完全符合您的需要。你有根据自己的需要改写它使用整页来查看结果吧。

＆＃13;

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"))

});

＆＃13;

.box{
width:150px;
height:150px;
margin:30px;
background:black;

}

svg{
position:absolute;
left:0; top:0;
width:100%;
height:100%;

}

＆＃13;

<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>

＆＃13;

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

1 个答案: