Media Query in einer SVG Datei

[Matthias Scharwies]

Servus!

Generell sind Media-Queries in eingebetteten SVGs ein wunder Punkt bei den Browsern.

Ja! Im Test-Wiki habe ich 2 svg als img im Fuß der Seite eingebaut. Das rechte Termitel-Bild hat folgende media query:

.termi {fill:black;}
@media (prefers-color-scheme:dark) {
	svg {
	   background: #113;
    }
    .termi {
        fill: white;
    }
}

Die funzt beim Umschalten in den Dark Mode und dem nachfolgenden Reload der Seite, aber nicht, wenn man allein mit dem Seiteninspektor das Farbschema umschaltet.

Wenn ich einen Tipp bekomme, welche Stelle geeignet ist, schreib ich auch gern was dazu ins Wiki. Die hier?

Ja, oder in einem eigenen Kapitel unter CSS/Media Queries

Man kann ein SVG auch per <object> einbinden. In dem Fall ist es in Chrome schick - die Media-Query wird beachtet.

Mach ich da was falsch? Oder ist der Fuchs einfach nur besoffen?

Ich würde vielleicht doch mit SVG in HTML arbeiten und die Etiketten als interne Grafik /Dokumentfragment (mit use) referenzieren und dann jeweils mit JS entsprechende Textstellen füllen.

Herzliche Grüße

Matthias Scharwies