SVG als Hintergrundbild, Regeln in CSS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angesprochenen elemente
antwort
baum
beispiel
datei
editor
eigenschaft
element
farbe
funktionieren
gesteckten rahmen
hintergrund
hintergrundbild
http
informieren
nutzen
satz
unterstellung
url
vorstellen
-
Moin Leute,
ich habe folgendes vor:
Ich möchte ein SVG als Hintergrundbild einbinden. Die Farben möchte ich jedoch über CSS steuern.
Das ich das CSS in SVG einbetten kann ist klar, aber dann verliere ich die Möglichkeit diese Daten über den regulären Workflow zentral zu aktualisieren. Auch ist geplant, das die Farben auf manchen Unterseiten anders dargestellt werden, was mit der momemtanen Lösung mehrere verschiedene SVG-Dateien benötigen würde.
Ich bin jetzt an folgendem Punkt angekommen: http://codepen.io/anon/pen/jBLWar?editors=1100
Leider bleibt der Hintergrund schwarz, obwohl es so aussehen sollte: https://paste.xinu.at/VHy7K/
Hat jemand eine Idee, wie ich das verwirklichen kann?
Es sei noch angemerkt, dass ich dies ohne JS lösen möchte. Insofern bitte auch nicht als Alternative vorschlagen, da ist mir die Variante mit den verschiedenen SVG-Dateien lieber.
Schöne Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich denke, dass das auf diesem Weg (CSS soll Eigenschaften einer Hintergrundgrafik beeinflussen) nicht funktionieren kann, denn es gibt im HTML-Baum die von dir angesprochenen Elemente (path, .c1 usw) nicht.
Ich könnte mir vorstellen, dass du statt dessen mit PHP und Inline-SVG eine Möglichkeit findest. -
mein-wunschname schrieb:
Ich denke, dass das auf diesem Weg (CSS soll Eigenschaften einer Hintergrundgrafik beeinflussen) nicht funktionieren kann, denn es gibt im HTML-Baum die von dir angesprochenen Elemente (path, .c1 usw) nicht.
Ich könnte mir vorstellen, dass du statt dessen mit PHP und Inline-SVG eine Möglichkeit findest.
Ach was, die gibt es nicht im HTML-Baum? Ach was. Hätte ich jetzt nicht vermutet.
Wenn ich ein inline-SVG nutze dann funktionieren die Anweisungen auch für dieses SVG, wenn sie im CSS enhalten sind. Die Angaben im CSS sind valide und funktionieren mit inline-SVGs, das habe ich natürlich überprüft bevor ich weiter gemacht habe. Der Punkt ist eben: Was ist bei dem Inilne-SVG im CSS anders als bei dem im HTML-Dokument?
Ich möchte das auch nicht per PHP erledigen, habe das nicht umsonst im HTML, CSS + JS Bereich gepostet.
Ich möchte ein SVG als Hintergrundgrafik nutzen. Die Eigenschaften der Elemente möchte ich hierbei im CSS speichern. Das ist auch per Spezifikation von HTML, CSS und SVG möglich. Bitte vorher informieren, bevor man einfach drauf los postet, das man denkt, es funktioniert so nicht. -
Deine Antwort enthält eine Unterstellung
tchab schrieb:
Bitte vorher informieren, bevor man einfach drauf los postet, das man denkt, es funktioniert so nicht.
die so nicht stimmt. Ich habe mehrere Websites konsultiert und auch 2-3 einfache Beispieldateien angelegt, um dein Beispiel und andere nachvollziehen zu können.
tchab schrieb:
Ach was, die gibt es nicht im HTML-Baum? Ach was. Hätte ich jetzt nicht vermutet.
Ich weiß jetzt nicht, was dieser Satz soll. Auf jeden Fall bin ich schon gespannt, welcher Lösungsansatz in dem von dir gesteckten Rahmen gefunden wird. -
mein-wunschname schrieb:
Deine Antwort enthält eine Unterstellung
tchab schrieb:
Bitte vorher informieren, bevor man einfach drauf los postet, das man denkt, es funktioniert so nicht.
die so nicht stimmt. Ich habe mehrere Websites konsultiert und auch 2-3 einfache Beispieldateien angelegt, um dein Beispiel und andere nachvollziehen zu können.
tchab schrieb:
Ach was, die gibt es nicht im HTML-Baum? Ach was. Hätte ich jetzt nicht vermutet.
Ich weiß jetzt nicht, was dieser Satz soll. Auf jeden Fall bin ich schon gespannt, welcher Lösungsansatz in dem von dir gesteckten Rahmen gefunden wird.
Siehe aktualisierter Pen: http://codepen.io/anon/pen/jBLWar?editors=1100
Inline lässt sich über css stylen. Ich verstehe nur nicht, was an dem Inline in CSS eben anders ist als mit dem in HTML. -
CSS erzeugt keine Elemente im HTML/DOM-Baum, denen man Eigenschaften zuweisen kann.
-
Ja, das ergibt so weit Sinn. Kann ich das inline-svg irgendwie als Hintergrund nutzen? Oder kann ich das svg dementsprechend transformieren?
-
Ich poste jetzt einfach mal so drauf los:
Was du mit "transformieren" meinst weiß ich nicht.
Das inline-SVG kannst du als "Pseudo"-Hintergrundbild nutzen, wenn du mit Positionierungen arbeitest (siehe Google: html elemente übereinander anordnen). Ob das sinnvoll oder passend ist hängt aber stark vom Gesamtdesign ab. Ich benutze so etwas nur noch extrem selten, da es dann immer wieder Konflikte mit responsivem Design gibt.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage