Ist es möglich, ein SVG mit flüssiger horizontaler Skalierung zu erstellen, ähnlich der alten Tabellenschnittmethode?

Ich versuche, ein SVG zu erstellen, das horizontal und flüssig skaliert werden kann, ähnlich den alten Bildern in Tabellenform, die verwendet werden, um eine Kopfzeile flüssig über den oberen Rand einer Seite zu skalieren. In der Regel müssen die Endkomponenten nicht gedehnt werden, während sich die mittlere Komponente streckt (oder wiederholt). Ich habe ein Beispielbild unten beigefügt. Ich habe mit verschachtelten svg-Tags in Kombination mit viewBox und preserveAspectRatio in einer Vielzahl von Konfigurationen experimentiert, kann es aber nicht ganz zum Laufen bringen.

Hier ist ein funktionierendes Beispiel dafür, was ich in reinem HTML / CSS tun muss:http://plnkr.co/edit/cSHBV27fL6k2m67FgwlA?p=preview

Ist es überhaupt möglich, dies mit einer einzelnen eigenständigen SVG zu tun, oder verschwende ich meine Zeit?

Antworten auf die Frage(4)

Ihre Antwort auf die Frage