SVD Draw Lines

by austinnoronha

HTML

<div class="map">
  <span class="dot one"></span>
  <span class="dot two"></span>
  
  <svg id="svg1" class="line" height="100%" width="100%"></svg>

</div>

CSS

.map{
  width: 300px;
  height: 300px;
  border: 1px solid #333;
  position: relative;
}
.dot{
  background: red;
  border-radius: 50%;
  display: block;
  width: 8px;
  height: 8px;
}
.dot.one{
  position: absolute;
  left: 10px;
  top: 10px;
}

.dot.two{
  position: absolute;
  left: 100px;
  top: 20px;
}

.line{
  position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: none;
}

JavaScript

function connectCircles(dotA, dotB, svgLine) {
    var c1 = $(dotA);
    var c2 = $(dotB);
    
    var newLineBeginX = c1.position().left + (c1.width() / 2);
    var newLineBeginY = c1.position().top + (c1.height() / 2);
    
    var newLineEndX = c2.position().left + (c2.width() / 2);
    var newLineEndY = c2.position().top + (c2.height() / 2);
    
    var line = "<line x1='"+newLineBeginX+"' y1='"+newLineBeginY+"' x2='"+newLineEndX+"' y2='"+newLineEndY+"' style='stroke:red;stroke-width:2' />"
    //var line = "<span class='line' style='height:"+lineSize+"px'></span>";
    $(svgLine).append(line);
    $("body").html($("body").html());
};
$(document).ready(function(){
	connectCircles(".one", ".two", '#svg1')

})