SVG_Link_Arrows

Draw persistent SVG lines between two diffs

by ivos

HTML

<!-- <p id="instructions">Click and drag either div to see automatic arrow adjustments.</p> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <marker id="arrowhead" viewBox="0 0 10 10" refX="3" refY="5"
        markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <g fill="none" stroke="black" stroke-width="2" marker-end="url(#arrowhead)">
    <path id="arrowLeft"/>
    <path id="arrowRight"/>
    <text id="lblTest">test lable</text>
  </g>
</svg>
<div id="a">Div a</div>
<div id="b">Div b</div>
<div id="c">Div c</div>
<div id="msg"></div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
path, text {
  cursor:pointer;
}
#msg{
  position:absolute;
  top:10px;
  right: 5px;
}
#instructions {
  position: fixed;
  left: 50%;
}
#a, #b, #c {
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 100px;
  height: 20px;
  left: 100px;
}
#a {
  background-color: blue;
  top: 20px;
}
#b {
  background-color: red;
  top: 150px;
}
#c {
  background-color: green;
  top: 80px;
  left: 500px;
}

JavaScript

var divA       = document.querySelector("#a");
var divB       = document.querySelector("#b");
var divC       = document.querySelector("#c");
var lblTest    = document.querySelector("#lblTest");
var arrowLeft  = document.querySelector("#arrowLeft");
var arrowRight = document.querySelector("#arrowRight");
var msg        = document.querySelector("#msg");

var drawConnector = function() {
  var posnALeft = {
    x: divA.offsetLeft - 8,
    y: divA.offsetTop  + divA.offsetHeight / 2
  };
  var posnARight = {
    x: divA.offsetLeft + divA.offsetWidth + 8,
    y: divA.offsetTop  + divA.offsetHeight / 2    
  };
  var posnBLeft = {
    x: divB.offsetLeft - 8,
    y: divB.offsetTop  + divB.offsetHeight / 2
  };
  var posnBRight = {
    x: divB.offsetLeft + divB.offsetWidth + 8,
    y: divB.offsetTop  + divB.offsetHeight / 2
  };
  var posnCLeft = {
    x: divC.offsetLeft - 8,
    y: divC.offsetTop  + divC.offsetHeight / 2
  };
  var posnCRight = {
    x: divC.offsetLeft + divC.offsetWidth + 8,
    y: divC.offsetTop  + divC.offsetHeight / 2
  };
  var posnLbl = {
    x: (Math.max(posnCLeft.x, posnBRight.x) - Math.min(posnCLeft.x, posnBRight.x)) / 2,
    y: (Math.max(divB.offsetTop, divC.offsetTop) - Math.min(divB.offsetTop, divC.offsetTop)) / 2 + Math.min(divB.offsetTop, divC.offsetTop)
  };
  var bc = {
  	Bleft: divB.offsetLeft, Bright: divB.offsetLeft + divB.offsetWidth,
    Cleft: divC.offsetLeft, Cright:divC.offsetLeft  + divC.offsetWidth,
    posnLbl:posnLbl
  };
  msg.innerHTML = JSON.stringify(bc);
  lblTest.setAttribute("x", posnLbl.x);
  lblTest.setAttribute("y", posnLbl.y);
  var dStrLeft =
      "M" +
      (posnALeft.x      ) + "," + (posnALeft.y) + " " +
      "C" +
      (posnALeft.x - 100) + "," + (posnALeft.y) + " " +
      (posnBLeft.x - 100) + "," + (posnBLeft.y) + " " +
      (posnBLeft.x      ) + "," + (posnBLeft.y);
  arrowLeft.setAttribute("d", dStrLeft);
  var dStrRight =
      "M" +
      (posnBRight.x      ) + "," + (posnBRight.y) + " " +
     ...