zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Farbe von SVG ändern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.02.2023, 11:49
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard Farbe von SVG ändern

Hallo Leute,

Ich möchte über CSS die Farbe einer SVG in einem HTML-Dokument ändern.

Leider bekomme ich das nicht hin
Beispiel: Farbänderung

Dabei habe ich es meiner Meinung nach so gemacht, wie es in den folgenden beiden Artikel beschrieben wird
https://blog.htmlvietnam.com/wie-kan...ei-andern.html
https://www.stefan-rammer.at/2016/09...t-css-aendern/

Code:
.svg-f path {
	fill: #F09;
}
Was muss ich denn ändern, damit ich die Farbe der SVG über CSS ändern kann???
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.02.2023, 00:02
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Ich bin mir nicht ganz sicher, doch wie ich weiß, geht das, nur wenn man den SVG Code direkt einbindet und nicht ohne img Tag.
Siehe hier, da gehts
https://codepen.io/basti1012/pen/QWVNeEa

Mit Javascript kann man die Farbe auch im img Tag ändern , doch css alleine weiß ich gerade nicht
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.02.2023, 09:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine Antwort und dein Beispiel.

Dass das ganze Inline funktioniert, das weiß ich, aber ich möchte die SVG nicht Inline einbinden.
Laut den beiden Artikeln funktioniert das ganze, aber anscheinend stimmt das leider nicht, wie mein Beispiel zeigt.

Schönen Tag noch
Mit Zitat antworten
  #4 (permalink)  
Alt 23.02.2023, 09:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wenn du das SVG nicht inline einbinden willst, dann kannst du auch nicht die Farbe ändern. Lies deinen von dir verlinkten Beitrag durch, da wird das erklärt. Wenn du es als img-Tag einbindest dann musst du das SVG per JS neu laden und dann das img-tag mit dem inline-code ersetzen. Was aber unnötiger Aufwand ist, da man es direkt inline einbinden kann.

Was spricht dagegen das SVG direkt einzubinden?
Mit Zitat antworten
  #5 (permalink)  
Alt 23.02.2023, 14:30
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Info. Das habe ich wohl überlesen.

Wenn ich eine Webseite habe, die nicht mit einem CMS erstellt wurde, sondern aus lauter einzelnen HTML-Dokumenten und eine SVG auf jeder Seite eingebunden ist, dann müsste man den Code für die SVG auf jeder einzelnen Seite ändern, wenn man die SVG mal austauschen möchte.
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
SVG Background Image: Problem nur auf Safari macOS und iOS AndreasB CSS 2 19.07.2019 12:41
SVG mit jQuery: stroke einfärben Communicate Javascript & Ajax 0 28.09.2017 21:36
'=' Zeichen nicht erlaubt in svg Datei ? Feirell (X)HTML 19 18.05.2013 15:58
Farbe für einzelnen Link festlegen TheNose CSS 2 13.02.2006 12:40
http://csskueche.xhtmlforum.de/index.php?css=2 -Terry- terrikay http://csskueche.xhtmlforum.de/ 8 19.05.2005 14:03


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