nicht angemeldet
Gunnar Bittersmann@@Jan-Peter Rühmann
Was genial währe wenn mann die Farben einer SVG Datei per css ändern könnte.
Eine SVG-Datei hat keine Farbe. 😜 Aber einen Bindestrich.
Hab da aber bis jetzt keinen Weg gefunden.
Wenn man die SVG-Dateien so anlegt, dass die Figuren symbols sind und für deren Farben custom properties vorsieht, dann kann man diese im HTML-ELement per <use> einbinden und dort auch die gewünschten Farben angeben.
Beispiel: SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<defs>
<symbol id="idic-symbol">
<path fill="var(--circle-color, yellow)" d="m9.5.15a8.75 8.5 0 10.5 0m-2.3 2.75a3.6 3.4 0 11-.5 0z"/>
<path fill="var(--triangle-color, gray)" d="m7.9 7 11.1 6.5-10 6.5z"/>
</symbol>
</defs>
</svg>
Im HTML steht
<svg viewBox="0 0 20 20">
<use href="https://bittersmann.de/test/assets/idic.svg#idic-symbol"/>
</svg>
und im Stylesheet
:root {
color-scheme: light dark;
--circle-color: light-dark(#c00, #d44);
--triangle-color: light-dark(#444, #aaa);
}
Und so sieht’s aus.
🖖 Live long and prosper
--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14