zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden SVG als background-image (nicht verlinkt)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.05.2022, 09:33
Benutzerbild von Dylan
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.10.2007
Beiträge: 68
Dylan befindet sich auf einem aufstrebenden Ast
Standard SVG als background-image (nicht verlinkt)

Für eine UL / LI Liste möchte ich als background-image ein aus Inkscape generiertes Icon (6 Kurvenpunkte) verlinken, nicht als Datei sondern als svg/xml code direkt ins CSS einfügen. Die Farbe des Icon sollte anpassbar sein, sowie ein Versatz des Icon mittels margin oder padding.

Ich konnte online viel über das Erstellen von SVG Dateien finden, aber leider nichts zur direkten Integration ins CSS. Vielleicht suche ich falsch, oder vielleicht ist meine Inkscape Ausgabe falsch, … hat vielleicht jemand so was umgesetzt und kann ein Beispiel oder einen Link posten?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2022, 16:05
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 32
top wird schon bald berühmt werden
Standard

Selbst noch nicht getestet, aber vor ein paar Monaten mal ein paar Lesezeichen zu dem Thema gesetzt:

https://kulturbanause.de/blog/svg-al...und-umfaerben/

https://css-tricks.com/lodge/svg/21-get-two-colors-use/

https://css-tricks.com/probably-dont-base64-svg/

Dürfte alles nicht genau das sein was du brauchst. Eventuell hilft es aber trotzdem.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.05.2022, 08:19
Benutzerbild von Dylan
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.10.2007
Beiträge: 68
Dylan befindet sich auf einem aufstrebenden Ast
Standard

Das ist hinsichtlich des CSS wonach ich gesucht hatte. Zum SVG bezgl. der Kurvenpunkte x,y habe ich eine manuelle Lösung gefunden. Ich übernehme die x u. y Werte einfach aus einem Grafikprogramm, durch jeweiliges markieren der Knotenpunkte x komma y. Tauscht man diese (erster Link) in polygon points aus, hat man das Ergebnis. Ich habe zus. fill-rule:nonzero; hinzugefügt, weil ich keine transparenten Bereiche in meinem Icon habe. Das funktioniert in Safari, Firefox u. Tor, Mac und Win. Edge habe ich nicht getestet, da background-image kein Problem sein sollte.

Danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigation positionieren maybebabe CSS 4 08.04.2013 22:17
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 20:41
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 01:35
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 15:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:38 Uhr.