MrMurphy1: Turnierbaum mit SVG

Hallo

ich möchte eine Seite mit einem Turnierbaum erstellen. HTML und CSS stehen und funktionieren wie von mir gewünscht. Responsive Design spielt zur Zeit keine Rolle.

Problematisch sind die Verbindungslinien. Die möchte ich nicht durch zusätzliche Elemente im body-Bereich einfügen, wie es häufig zu sehen ist, sondern über CSS.

Dazu habe ich eine SVG mit den Verbindungslinien erstellt, deren Größe ich jeweils anpassen möchte. Die Größenanpassung bekomme ich aber nicht hin. Gibt es dafür eine Lösung?

http://boratb.bplaced.net/index.html

In dem Beispiel ist die SVG als Pseudoelement vom Otto im Endspiel eingefügt und soll bei den beiden Halbfinalen enden.

Im FF, Chrome und Opera bekomme ich die Größe nicht angepasst, im IE11 passt bereits die Position nicht. Außerdem sollen die Verbindungslinien auch beim Zoomen passen.

Ich habe bereits versucht die Verbindungslinien als Hintergrundgrafiken einzufügen. Das funktioniert auch bei 100%-Zoom in den genannten Browsern (FF, Chrome, Opera, IE11), allerdings habe ich (auch mit der Einheit px) keine passenden Werte für das Zoomen gefunden.

Gruss

MrMurphy