Divs mit Linie verbinden

[Rolf B]

Hallo Gunnar,

das ist, wenn ich MDN richtig deute, ein Attribut aus SVG 2. In welchem Brauser funktioniert das? In Chrome dem Anschein nach nicht. In diesem SVG variiert die Linenstärke, wenn man die width oder height ändert.

<svg class="connector" viewbox="0 0 100 100"
     preserveAspectRatio="none" vector-effect="non-scaling-stroke"
     style="top:200px; left: 100px; width:300px; height:200px">
   <line x1="0" y1="0" x2="100" y2="100" stroke="red" />
</svg>

(Die connector class liefert position:absolute, stroke und stroke-width).

Was bei mir in Chrome geklappt hat, ist preserveAspectRatio="none" und Prozentangaben für die Endpunkte der line:

<svg class="connector" preserveAspectRatio="none"
     style="top:200px; left: 100px; width:300px; height:200px">
   <line x1="0" y1="0" x2="100%" y2="100%" />
</svg>

Lästig ist hier aber immer noch, dass man die Line je nach Lage der Endpunkte unterschiedlich zeichnen muss, und dass man bei Linien mit einem Verlauf nahe an 0° oder 90° Gefahr läuft, dass sich die Box auf Breite oder Höhe 0 reduziert.

Die Idee einer reinen SVG Implementierung scheint deutlich besser - aber ob das dann mit Angular umsetzbar ist?!

Rolf