HTML Elemente mit Linien verbinden

Question

Angenommen ich habe 2 HTML Divs.

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:lightblue; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:lightblue; position:absolute;"></div>

Wie kann ich die Divs mit einer Linie verbinden?

Answer 1

Du kannst ein SVG Element erstellen und die Linie darin darstellen.

<svg width="500px" height="500px">
  <line x1="50" y1="50" x2="350" y2="350" stroke="black"/>
</svg>

X1 und X2 sind die Startposition, X2 und Y2 die Endposition. "div1" ist ganz in der Ecke und 100px breit/hoch. Die Mitte auf beiden Achsen ist also 50px. Das zweite Div ist von links und von oben 300px entfernt und ist ebenfalls 100px breit/hoch. Du rechnest also zu beiden Achsen nochmal die Hälfte des DIV dazu so kommst du auf 350px.