Connect Line Between 2 Elements - Javascript
So heree is my solution with SVG!
const xmlns = 'http://www.w3.org/2000/svg'
, svgLink = 'http://www.w3.org/1999/xlink'
, elmSVG = document.getElementById('elmSVG')
, bot_inversor = 80
, top_fotovolta = 300
;
for (let i=0;i<4;i++)
{
let x = 10 + (i*60)
, fotovolta = document.createElementNS(xmlns, 'use');
fotovolta.setAttributeNS(svgLink, 'xlink:href', '#fotovoltaico');
fotovolta.setAttributeNS(null, 'x', x);
fotovolta.setAttributeNS(null, 'y', top_fotovolta);
fotovolta.setAttributeNS(null, 'width', '50');
fotovolta.setAttributeNS(null, 'height', '70');
elmSVG.appendChild(fotovolta);
adjustLines(i);
}
function adjustLines(item)
{
let left = (item<2) // the hard part...
, b1 = 25 + (item *60) + (left?0:20)
, b2 = b1 + (left?20:-20)
, a1 = 105 + (item *10) + (left?0:10)
, a2 = a1 + (left?5:-5)
, l1 = 50 + (left?item:3-item) *30
, l2 = l1 + 10
;
let jLine1 = document.createElementNS(xmlns, 'polyline');
jLine1.setAttributeNS(null, 'points', `${b1},${top_fotovolta} ${b1},${bot_inversor+l1} ${a1},${bot_inversor+l1} ${a1},${bot_inversor}`);
elmSVG.appendChild(jLine1);
let jLine2 = document.createElementNS(xmlns, 'polyline');
jLine2.setAttributeNS(null, 'points', `${b2},${top_fotovolta} ${b2},${bot_inversor+l2} ${a2},${bot_inversor+l2} ${a2},${bot_inversor}`);
elmSVG.appendChild(jLine2);
}
#elmSVG {
width: 250px;
height: 380px;
background-color: #b4f0f0;
margin: 1em;
}
#elmSVG * {
fill:none;
stroke:#2f363d;
stroke-width:2px;
}
.curveSVG {
stroke-linecap:round;
}
<h2>Connecting Lines</h2>
<svg id="elmSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 380">
<defs>
<symbol id="inversor" viewBox="0 0 70 70">
<rect x="0" y="0" width="70" height="70" />
<line x1="70" x2="0" y1="0" y2="70" />
<line x1="10" x2="30" y1="15" y2="15" />
<line x1="10" x2="30" y1="20" y2="20" />
<path d="M 40,55 Q 45,45 50,55 T 60,55" class="curveSVG" />
</symbol>
<symbol id="fotovoltaico" viewBox="0 0 50 70">
<rect x="0" y="0" width="50" height="70" />
<line x1="0" x2="25" y1="0" y2="20" />
<line x1="50" x2="25" y1="0" y2="20" />
</symbol>
</defs>
<use xlink:href="#inversor" x="90" y="10" width="70" height="70" />
</svg>