kostenloser Webspace werbefrei: lima-city


SVG als Hintergrundbild, Regeln in CSS

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    tchab

    tchab hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  4. Autor dieses Themas

    tchab

    tchab hat kostenlosen Webspace.

    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.
  5. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  6. Autor dieses Themas

    tchab

    tchab hat kostenlosen Webspace.

    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.
  7. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    CSS erzeugt keine Elemente im HTML/DOM-Baum, denen man Eigenschaften zuweisen kann.
  8. Autor dieses Themas

    tchab

    tchab hat kostenlosen Webspace.

    Ja, das ergibt so weit Sinn. Kann ich das inline-svg irgendwie als Hintergrund nutzen? Oder kann ich das svg dementsprechend transformieren?
  9. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!