CSS dynamische Pfeilgenerierung

Hallo zusammen,

ich wollte mal nachfragen, ob es irgend eine einfache/praktikable Möglichkeit gibt, Pfeile dynamisch mit CSS/JS zu generieren?! Als Beispiel mal bei dieser Grafik (oberste) vom Git Branching Modell. Einfach dass man bspw. via jQuery-Selektor zwei Elemente angibt, ne Methode aufruft und diese dann den Pfeil an eine Stelle zwischen den zwei Elementen, evtl. mit Kollisionsprüfung zeichnet (siehe bspw. MS Visio).

Konkret würde es da um ne Tabelle gehen, die Beziehungen innerhalb der Zellen darstellen soll. Daran sollte man sich aber natürlich nicht aufhängen, sondern es sollte ggf. auch übergreifend frei Schnauze funktionieren.

Gibts da schon vorgefertigte Plugins oder evtl. Snippets, auf die man aufbauen könnte? Meine Recherchen in Google waren da nicht grad sehr zielführend.


LG

Im Zweifel: selbst schreiben.
- Es wäre noch mit recht brauchbarem Aufwand möglich Start- und Endpunkt der Pfeile auf Basis der Außenkanten des Start- und Zielelementes zu ermitteln.
- Mit etwas SVG-Kenntnissen oder Erfahrung bei Canvas könnte man jetzt ein DOM-Element erzeugen, und in dieses Element eben wahlweise mit Canvas einen Pfeil malen oder mit SVG erzeugen (besser, weil flexibler & schneller).

Dann brauchst du noch 3 Dinge:
1.) Positionsbestimmung des Pfeil-Elements. Absolute Positionierung ist klar, aber absolut zu was? Kannst quasi nur zum Window/Body positionieren...
2.) Z-Index des Pfeils. Er muss natürlich "über" den Elementen liegen... Darf aber mit nichts falschem (z.B. ner Dropdown-Navi) wechselwirken
3.) Click-Handling. Wenn der Pfeil ein DOM-Element ist, dann hat es einen Clickhandler. Blöd, wenn du auf etwas unter dem Pfeil klicken willst...

Schade, dachte da gäbe es wenigstens etwas, worauf man aufsetzen könnte.

SVG ist prinzipiell ne gute Idee und kein Problem, da die heutigen Browser es ja unterstützen. Da kann ich mir in Inkscape und Illustrator ja mal ein paar Pfeile zurechtziehen und dann mal die Methodik dahinter verstehen und selbst nachbasteln (wird bestimmt recht einfach als Linie + Polygon zusammengesetzt sein).

Die drei letzten Dinge sehe ich jetzt (noch) nicht als Problem an.

1) Könnte man absolut von der Eltern-Tabelle aus setzen und dann relativ zu den einzelnen Elementen runter rechnen.
2) Ein ordentlich verteilter Z-Index macht da bestimmt keine Probleme.
3) Mit ner richtigen Positionierung der Pfeile, denke ich kein Problem.

Vielleicht reicht es auch bereits über die Kanten zu gehen wie du sagst und da einfach ein paar Divs aneinanderzureihen mit ner geringen Höhe/Breite.

Ich werd mal ein wenig mit allem experimentieren. Danke schon mal.