nicht angemeldet
SVG-Grafik Hintergrundbild skalieren
Gunnar BittersmannHallo,
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:
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
-
@@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, andpreserveAspectRatio; besonders der Abschnitt ThepreserveAspectRatioAttribute dürfte interessant für dich sein.Und wenn die Grafik skaliert werden soll, machen Angaben zu
widthundheightin der SVG-Datei auch nicht wirklich Sinn. Also in den meisten Fällen nicht.LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Hallo
besonders der Abschnitt The preserveAspectRatio
Danke, genau das war das Problem.
Gruss
MrMurphy
-
-
@@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 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
Chrome rechne ich mal mit dazu. ↩︎