SVG-Grafik Hintergrundbild skalieren

[MrMurphy1]

Hallo,

ich möchte eine SVG-Datei als Hintergrundbild für eine Überschrift benutzen. Dabei soll das Hintergrundbild sich nicht wiederholen und die gesamte Größe des Überschrift-Elements ausfüllen.

Das funktioniert auch im FF und IE11. Nicht hingegen in Chrome und Opera. Dort wird die Grafik in ihrem Ursprungsverhältnis links angezeigt und die gelbe Hintergrundfarbe ist zu sehen.

Safari kann ich mangels Rechner nicht testen.

Die Überschrift soll in ihrem Container zentriert nach unten versetzt stehen, deshalb die padding-Werte.

Gibt es eine Möglichkeit (und wenn ja: welche) damit die SVG-Hintergrundgrafik in allen Browsern das gesamte Elment ausfüllt und von der gelben Hintergrundfarbe nichts zu sehen ist?

Link zur Seite unter "Problematische Seite". Hier noch der direkte Link zur Grafik:

bgg.svg

Auch wenn es reine CSS-Lösungen gibt interessiert es mich wie eine SVG-Datei wie von mir gewünscht als Hintergrundbild eingebunden werden kann. Eine reine CSS-Lösung als Zusatzinfo stört mich aber auch nicht.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Dabei soll das Hintergrundbild sich nicht wiederholen und die gesamte Größe des Überschrift-Elements ausfüllen.

Das funktioniert auch im FF und IE11. Nicht hingegen in Chrome und Opera. Dort wird die Grafik in ihrem Ursprungsverhältnis links angezeigt

Das ist ja auch in der SVG-Datei so angegeben, dass sich die Grafik so verhalten soll. Ich würde eher denken, dass das in IE und Firefox nicht funktioniert.

Schau mal in Sara Soueidans Artikel Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio; besonders der Abschnitt The preserveAspectRatio Attribute dürfte interessant für dich sein.

Und wenn die Grafik skaliert werden soll, machen Angaben zu width und height in der SVG-Datei auch nicht wirklich Sinn. Also in den meisten Fällen nicht.

LLAP 🖖

[MrMurphy1]

Hallo

besonders der Abschnitt The preserveAspectRatio

Danke, genau das war das Problem.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Safari kann ich mangels Rechner nicht testen.

?? Safari ist doch auf jedem Rechner vorinstalliert. SCNR.

Safari verhält sich wie zu erwarten wie seine WebKit-Kollegen^[1].

LLAP 🖖

---

1. Chrome rechne ich mal mit dazu. ↩︎