Wann externes SVG über CSS stylen?
MB
- css
- html
- svg
0 dedlfix0 MB
1 ThomasM0 MB
moin,
ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.
Aber tauch der Gedanke bei den W3C Entwicklern auf? Und Arbeiten die dran das man extern SVG's stylen kann??? Aufjedenfall interessiert es mich brennent.
lgmb
Tach!
ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.
Mit etwas Hilfe von Javascript kann man erreichen, dass das referenzierte Bild zum eingebundenen wird, was man dann CSSen kann: https://stackoverflow.com/a/43015413/1523086.
dedlfix.
moin,
ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.
Mit etwas Hilfe von Javascript kann man erreichen, dass das referenzierte Bild zum eingebundenen wird, was man dann CSSen kann: https://stackoverflow.com/a/43015413/1523086.
jo, das machen so ziehmlich alle Responsive Frameworks die ich kenne mit externer SVG-Einbindung 😕. Sorry, ich muss die Frage präzisieren: Gibt es externe SVG's die in HTML eingebunden und von CSS gesteuert werden ohne Skript unterstützung wie JS?
lgmb
Hallo MB,
ich habe erfahren, dass man SVG's nur über direkte Einbindung im HTML-Code mit CSS stylen kann. Über jeglichen Import gehts nicht 😕, jedenfalls hab ich noch nie was davon gehört.
Aber tauch der Gedanke bei den W3C Entwicklern auf? Und Arbeiten die dran das man extern SVG's stylen kann??? Aufjedenfall interessiert es mich brennent.
Inhalte von svg-Elementen, die in HTML direkt eingebunden sind, lassen sich auch über externe Stylesheets im head des HTML-Dokuments erreichen.
Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:
<?xml-stylesheet href="name.css" type="text/css"?>
Grüße,
Thomas
moin,
Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:
<?xml-stylesheet href="name.css" type="text/css"?>
Sehr interessant! Kannst du das Bitte näher ausführen 😀? Ich kann mit deiner Aussage leider nichts anfangen außer, das es mein interesse geweckt hat. Link reicht schon oder Code Beispiel.
lgmb
@@MB
Für externe SVG-Dokumente, etwa mittels object eingebunden, kann wie bei XML üblich diese Verarbeitungsanweisung verwendet werden:
Und ich hab’s mit img
versucht …
Sehr interessant! Kannst du das Bitte näher ausführen 😀? Ich kann mit deiner Aussage leider nichts anfangen außer, das es mein interesse geweckt hat. Link reicht schon oder Code Beispiel.
LLAP 🖖
moin,
Sehr interessant! Kannst du das Bitte näher ausführen 😀? Ich kann mit deiner Aussage leider nichts anfangen außer, das es mein interesse geweckt hat. Link reicht schon oder Code Beispiel.
Danke. Geht in deinem Beispie auch interaktive CSS dynamik ohne skript unterstützung (z.B.: :hover
, :focus
)? Das is ja meine Ausgangsfrage. Sonst muss ich mir eigens per PHP was zusammen basteln damit die Glyphicons funktionalität auch erhalten bleibt: veränderbare größe und farbe. Frisst ladezeit und ist umschön wenn SVG's kreuz und quer im HTML-quellcode verteilt sind 😕.
lgmb
@@MB
Geht in deinem Beispie auch interaktive CSS dynamik ohne skript unterstützung (z.B.:
:hover
,:focus
)?
Du suchst currentColor
? Sweet home 🏠
S.a. den Abschnitt beginnend mit „Nun wollen wir nicht irgendeine Größe; und auch die Farbe festlegen“ im ersten Teil meines Tutorials.
Glyphicons
Du verwendest symbol
und use
? Siehe ganzen ersten und zweiten Teil.
LLAP 🖖
moin,
Besten Dank! Ich muss mich da einlesen.
lgmb
moin,
Dank nochmals. Hab ne simple Klasse geschrieben was XML importiert, zusätzlich noch ein String im Attribute-Node einfügt und als XML ausgibt.
lgmb