Привязка путей к центру объекта
HTML
<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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<svg id="sv" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g stroke-width="1" opacity=".5">
<path id="ai"/>
<path id="bi"/>
</g>
</svg>
<div id="a">Возьми мышой <br>меня за "здесь"</div>
<div id="b">И передвинь, <br>(что мочи есть)</div>
<script>
var paper = Raphael("b", 20, 20); // box
var ball = paper.circle(10, 10, 6).attr({ fill: "#0cc", stroke: "#000", "stroke-width": 2 });
</script>
CSS
html, body
{width: 100%; height: 100%;
margin: 0; padding: 0;
}
#ai, #bi {fill: #aee; stroke: #aee; cursor: pointer;}
#a {top: 20px; left:20px; background: rgba(140, 200, 240, .7);} /* */
#b {top: 120px; left:120px; background: rgba(240, 140, 140, .7);}
#a, #b
{position: fixed;
text-align: center;
padding: 6px;
width:160px; height:80px;
border: 1px solid #888;
border-radius:60px; cursor: move;
}
#sv {position: fixed;}
JAVASCRIPT
var divA = document.querySelector("#a");
var divB = document.querySelector("#b");
//var ai = document.querySelector("#ai");
//var bi = document.querySelector("#bi");
//var z = document.querySelector("z")
var ярмо = function()
{var ap = {x: divA.offsetLeft + divA.offsetWidth / 2,
y: divA.offsetTop + divA.offsetHeight / 2}; // + 10
var bp = {x: divB.offsetLeft + divB.offsetWidth / 2,
y: divB.offsetTop + divB.offsetHeight / 2}; // + 10
var ad = "M" + (ap.x) + "," + (ap.y) + "h" + (bp.x - ap.x) + "v" + (bp.y - ap.y) + "z"; // + 2 + 200
var bd = "M" + (bp.x) + "," + (bp.y) + "h" + (ap.x - bp.x) + "v" + (ap.y - bp.y) + "z"; // - 2 +2
ai.setAttribute("d", ad);
bi.setAttribute("d", bd);
};
$("#a, #b").draggable({drag: function(event, ui) {ярмо();} });
setTimeout(ярмо, 500);
