Quick test of a way to draw SVG lines between DIVs
A Pen by Christopher C. Mills on CodePen.
Quick test of a way to draw SVG lines between DIVs
A Pen by Christopher C. Mills on CodePen.
<div id="one" class="point"></div> | |
<div id="two" class="point"></div> | |
<svg id="svg"> | |
<line id="line"/> | |
</svg> |
var line = $('#line'); | |
var div1 = $('#one'); | |
var div2 = $('#two'); | |
var x1 = div1.offset().left + (div1.width()/2); | |
var y1 = div1.offset().top + (div1.height()); | |
var x2 = div2.offset().left + (div2.width()/2); | |
var y2 = div2.offset().top; | |
line.attr('x1',x1).attr('y1',y1).attr('x2',x2).attr('y2',y2); |
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
html, body{ | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
} | |
#svg{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
#line{ | |
stroke-width:2px; | |
stroke:rgb(0,0,0); | |
} | |
.point{ | |
width: 100px; | |
height: 100px; | |
background: red; | |
position: absolute; | |
} | |
#one{ | |
top: 20px; | |
left: 50px; | |
} | |
#two{ | |
bottom: 20px; | |
right: 50px; | |
} |