Encoder: SVG-Maske erstellen ?

Beitrag lesen

svg ist ein Grafikformat. Damit kannst du skalierbare Grafiken erstellen, die auch beim Vergrößern/Verkleinern nicht pixelig werden.
Mit deinem Vorhaben hat das allerdings nicht zu tun.
Dazu müsstest du die Timeline in einzelnen Stückchen zeichnen und dafür müsstest du wissen wie lang diese Stückchen sein müssen. Das kannst du aber nicht wissen, da das in jedem Browser unterschiedlich aussehen kann.

Das einzige was ich mir vorstellen könnte wäre was mit JavaScript, mit dem du die Positionen der Unterbrechungspunkte berechnest und dann nachträglich anhand dieser Werte die Einzelstückchen der Timeline positionierst.
Ich würde das aber nicht tun, denn das wird wahrscheinlich ein elendes Gefrickel und wenn jemand kein JS eingeschaltet hat, sieht die Seite nicht mehr ansprechend aus.
Dann doch lieber auf die Unterbrechung verzichten und stattdessen nur Punkte auf eine durchgängige Linie setzen.