Kann man eine Svg erstellen, die flüssige horizontale Skalierung hat, ähnlich der alten Table-Slice-Methode?
Ich versuche, ein svg zu bauen, die verwendet horizontal und flüssig, ähnlich wie die alten Tisch geschnittenen Bilder skaliert werden kann, über den Anfang einer Seite einen Kopfströmungstechnisch zu skalieren. In der Regel erfordert dies, dass sich die Endkomponente (n) nicht dehnt, während sich die mittlere Komponente dehnt (oder wiederholt). Ich habe ein Beispielbild unten eingefügt. Ich habe mit verschachtelten svg-Tags kombiniert mit viewBox und preserveAspectRatio in einer Vielzahl von Konfigurationen experimentiert, kann aber nicht ganz damit es funktioniert.
Hier ist ein funktionierendes Beispiel dafür, was ich tun muß, in reiner HTML / CSS: Ссылка
Ist es sogar möglich, dies mit einem einzigen eigenständigen Svg zu tun, oder verschwende ich meine Zeit?
4 Antworten
Ich antworte darauf, weil ich etwas Ähnliches machen musste.
Ja , Sie können es nur mit SVG tun. Die Schlüsselattribute sind viewBox und preserveAspectRatio . preserveAspectRatio="xMaxYMid" hält das Rechteck nach rechts und xMinYMid hält das Rechteck nach links. Setzen Sie viewBox auf die gewünschte Größe der Rechtecke am Ende.
Dies wurde in Chrome, Firefox und IE getestet.
Hier ist eine Plocker-Demo .
Beachten Sie, dass Sie, wenn Sie die Höhe der SVG auf 100% anstelle von 20px ändern, das Bild mit einem content html div skalieren können.
Wenn du jedes svg in ein DIV legen kannst, bestimmt seine Größe seine svg. Die SvG-Größen müssen jedoch in Prozent angegeben werden. Dies kann dir nicht dienen, für komplexe Svg, mit allem ist "schweben"
Das einfache Rechteckbeispiel ist unten gezeigt:
%Vor%Dies ist ein Javascript, um die Rechtecke basierend auf der SVG-Breite anzupassen. Leider konnte ich keinen CSS-Ansatz erstellen.
%Vor%