|
||||
SVG als CSS-Hintergrundbild
Moin.
Ich finde die Ursache nicht, warum von zwei validen SVG-Bildern https://borumat.de/-/html-test/header-home.svg https://borumat.de/-/html-test/header-home-2.svg das erste bei der Verwendung als CSS-Hintergrundbild dargestellt wird, das zweite jedoch nicht. HTML-Code:
#logo div { background-repeat: no-repeat; background-image: url(https://borumat.de/-/html-test/header-home-2.svg);} HTML-Code:
<body><div id="page"><header> <div id="logo"> <div>Foo</div> </div></header></div></body> Das zweite habe ich von Hand geschrieben. Im Wesentlichen unterscheidet es sich durch die Art der Einbettung des JPGs. Was mögen die Browser an meinem SVG nicht? Verstehen sie nur als Base64 kodierte Bilder innerhalb eines SVG? Ein Test mit einem dritten SVG-Bild, basierend auf Bild header-home-2.svg, wo ich die Angabe xlink:href="https://borumat.de/-/html-test/header-home.jpg" durch xlink:href="data:image/jpeg;base64 ..." ersetzt habe, legt das nahe. Denn das funktioniert. Über euren Rat freue ich mich. Danke.
__________________
Geändert von AndreasB (20.04.2019 um 14:33 Uhr) |
Sponsored Links |
|
||||
@cloned
Meinst Du mit Beispiele die beiden URLs zu den SVG? Die funktionieren, das ist klar. Was nicht funktioniert ist https://borumat.de/-/html-test/header-home-2.svg als CSS-Hintergrundbild. Eine Vermutung habe ich habe ich ja geäußert, aber ich finde bisher keine Infos in den Specs, dass base64 zwingend nötig ist.
__________________
|
|
|||
Was ich noch als unterschied sehe: Bei deinem SVG steht noch "<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> " direkt zu Beginn, beim anderen svg ist nur der <svg> ... </svg> Tag vorhanden. Eventuell stört das? man sieht übrigens auch im netzwerk-tab des browsers dass das Bild zwar geladen aber nicht gerendert wird wenn man auf "Vorschau" für das Bild klickt. Was genau es da hat kann ich dir aber gerade leider auch nicht sagen. |
|
|||
Ich frage mich hier ja auch was der Vorteil ist, das bild direkt ins SVG zu integrieren und nicht gleich mit CSS clip-path zu arbeiten. Dann kann das Bild auch einfach ausgetauscht werden und auch an mehreren Stellen angewandt werden.
Auch der Text-Effekt sollte sich doch mit reinem CSS umsetzen lassen denke ich (zumindest in modernen Browsern, IE mal außen vorgenommen) |
|
||||
@cloned
Die Unterstützung von clip-path im SVG ist gut, in HTML leider schlecht. Das ist der einzige Grund. Edit: @protonenbeschleuniger Ich habe jetzt 2 Testcases gebaut. HTML/CSS ist identisch. SVG ist bis auf die Einbindung des JPGs identisch. https://borumat.de/-/html-test/heade...t-externem-jpg https://borumat.de/-/html-test/heade...mit-inline-jpg
__________________
Geändert von AndreasB (25.04.2019 um 10:45 Uhr) |
|
|||
Hier kann man wohl nur durch ausprobieren und testen auf die Lösung kommen, wirklich wissen tut es hier keiner.
https://stackoverflow.com/questions/...ine-svg-in-css Hier noch etwas, was das Thema im Ansatz behandelt, eine weitere Möglichkeit dein SVG einzubinden. So wie ich das sehe wirst du um das kodieren des Bildes nicht herumkommen. Bezüglich der schlechten Unterstützung: Ja, im IE (und Safari) funktioniert es nicht so gut, Edge wird funktionieren, wenn sie auf webkit umgestellt haben. Da ist die Frage, wie wichtig das aussehen in den Browsern ist oder ob hier Abstriche gemacht werden können. Muss dort zB der Effekt nicht zwingend angezeigt werden dann kann clip-path doch verwendet werden. Muss der Designerin halt erklärt werden Bzw. dort wird als Fallback dann das kodierte Bild der Designerin eingebunden. Das aber nur am Rande, wenn die SVG Lösung verwendet werden muss dann ist es klar dass das anders nicht geht. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Inspiration - Sammlung von Links | emti | Ressourcen | 8 | 01.12.2009 19:02 |
Doctype und CSS Problem | tech | CSS | 3 | 29.05.2009 21:16 |
CSS Problem mit Hintergrundbild | runner | CSS | 2 | 10.03.2009 18:38 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |
Hintergrundbild über css wird nicht in mozilla angezeigt? | toby | CSS | 2 | 15.08.2005 18:41 |