nicht angemeldet
Svg Hintergrund Bild
0 
Matthias Apsel
0 
Auge
0 Matthias Apsel
0
Svg Hintergrund Bild
Der MartinHallo, Ich möchte ein feturbulence Filter Element als Hintergrund Bild in eine html Datei einbinden. Ich habe mich in den vergangen Tagen dahingehend im Netz umgeschaut und folgende Seite gefunden. http://www.mediaevent.de/svg-in-html-seiten/
Ich habe mir eine svg Datei erstellt und diese in meinem Project im Ordner (svgs) gespeichert. Die svg Datei lässt sich über den Browser problemlos öffnen und zeigt mir auch die gewünschte turbulence an.
Versuche ich aber die svg Datei, über eine html Datei als Hintergrund Bild zu, wie in dem div Beispiel zu öffnen, wir mir nur eine weiße Seite angezeigt. Der Code den ich verwende.
<div style="background: url(svgs/mysvg.svg);">
</div>
Mach ich da was falsch, oder muss ich da was beachten was ich übersehen habe? Kann ich die svg Hintergrund Datei auch in das Body Element packen?
Guss Marcus.
-
Hallo Marcus Strauß,
<div style="background: url(svgs/mysvg.svg);"> </div>Stimmt der Pfad? Relativ zur CSS-Ressource!
Mach ich da was falsch,
Wahrscheinlich.
oder muss ich da was beachten was ich übersehen habe?
Ich denke nicht.
Kann ich die svg Hintergrund Datei auch in das Body Element packen?
Ja.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)-
Hallo
<div style="background: url(svgs/mysvg.svg);"> </div>Stimmt der Pfad? Relativ zur CSS-Ressource!
Öhhm, in diesem Fall relativ zum Dokument.
In der Hoffnung, dass die Beschreibung verständlich ist: Die Datei „mysvg.svg“ muss im Unterverzeichnis „svgs“ des Verzeichnis des aktuell angezeigten Dokuments liegen.
Tschö, Auge
--
Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview-
Hallo Auge,
Stimmt der Pfad? Relativ zur CSS-Ressource!
Öhhm, in diesem Fall relativ zum Dokument.
Öhhm, Rech hassu.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)-
Hallo
dann auch noch der Hinweis, auch wenn es selbstverstänliche sein sollte:
Der div-Container muss natürlich auch eine Größe haben. So wie in dem Beispiel hat er keine Größe.
Gruss
MrMurphy
-
Hi,
Der div-Container muss natürlich auch eine Größe haben.
hat er immer. Und wenn sie Null ist. ;-)
So wie in dem Beispiel hat er keine Größe.
Doch: Er nimmt die gesamte verfügbare Breite ein und seine Höhe richtet sich nach dem Inhalt. Ich gehe mal davon aus, dass Marcus den Inhalt nur als unwichtig weggelassen hat.
So long,
Martin-
hallo, erst mal danke für die vielen Antworten... die datei (Test.html) mit der ich die mysvg.svg öffnen will, liegt im obersten Verzeichnis des Projectes also lokalhost/Projectname/Test.html
gebe ich das so in den Browser ein, wird die Test.html Datei geöffnet. in der Test.html Datei steht nur schlicht und ergreifend folgendes.
<!DOCTYPE html> <html> <body> <div style="background: url(mysvg.svg);"></div> </body> </html>ich habe die mysvg.svg nun auch rein zum testen in das oberste Projectverzeichnis kopiert. aber es funktioniert nicht, die Seite bleibt weiß.
gebe ich hingegen in die Browserleiste lokalhost/Projectname/mysvg.svg ein wird mir die Seite problemlos angezeigt.
und ähm ja, das war mein erster Gedanke nachdem das nicht geklappt hat dem ganzen eine höhe und weite von 100% zu verpassen. das Ergebnis blieb das gleiche.
-
Hallo Marcus,
und ähm ja, das war mein erster Gedanke nachdem das nicht geklappt hat dem ganzen eine höhe und weite von 100% zu verpassen. das Ergebnis blieb das gleiche.
Hat das Element (div) wirklich eine Höhe von 100% des Viewports? Dazu muss, soweit ich weiß, entweder die Höhe absolut angeben sein (
px, em, vh) oder auch alle Elternelemente (in diesem Fallhtmlundbody) eine relative Höhe von 100% besitzen. Ich würde zum Testen die Höhe und Breite auf 200 Pixel setzen und schauen, ob das richtig SVG angezeigt wird.Mit den Entwicklertools deines Browsers kannst du dir die tatsächliche Höhe des Elements in Pixel anzeigen lassen.
Gruß, der lichtheini
-
gelöst,
das Problem lag in der *.svg Datei. ich habe im einführenden <svg> Element nicht das Attribut xmlns="http://www.w3.org/2000/svg" mit dem entsprechenden Wert stehen gehabt.
jetzt klappt es...
-
-
-
-
-
-
-