Signatur
Beschreibung
Die Eigenschaft media des Interfaces SVGStyleElement spiegelt das Attribut media eines <style>-Elements innerhalb eines SVG-Dokuments wider. Der Wert ist eine Media-Query-Liste als String, zum Beispiel "screen and (min-width: 600px)" oder "print". Die Regeln im Stylesheet werden nur angewendet, wenn die Media-Query auf die aktuelle Ausgabeumgebung zutrifft.
Nützlich ist die Eigenschaft, wenn man Stile in inline eingebetteten oder eigenständigen SVG-Grafiken abhängig von der Umgebung schalten will, etwa eine vereinfachte Druckversion, Dark-Mode-Farben über (prefers-color-scheme: dark) oder eine andere Darstellung auf kleinen Bildschirmen. Weil man den Wert zur Laufzeit ändern kann, lassen sich ganze Stylesheets per Skript an- und abschalten, ohne einzelne Regeln anzufassen.
Fehlt das Attribut, gibt die Eigenschaft einen leeren String zurück. Für den Browser heißt das dasselbe wie "all": Das Stylesheet gilt immer. Beim Schreiben wird das Attribut media im DOM direkt mitgeändert, und der Browser prüft die Stile sofort neu.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: eine Media-Query-Liste, z. B. "print" oder "(max-width: 400px)". Mehrere Queries werden mit Komma getrennt. |
Rückgabewert
media. Ist das Attribut nicht gesetzt, ist es ein leerer String.Beispiele
Media-Query eines SVG-Stylesheets auslesen
// HTML: <svg id="logo"><style media="print">circle { fill: black; }</style><circle r="20" cx="25" cy="25"/></svg>
const styleEl = document.querySelector('#logo style');
console.log(styleEl instanceof SVGStyleElement);
console.log(styleEl.media);Dark-Mode-Stile dynamisch aktivieren
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const darkStyle = document.createElementNS(svgNS, 'style');
darkStyle.textContent = 'rect { fill: #222; } text { fill: #eee; }';
darkStyle.media = '(prefers-color-scheme: dark)';
svg.prepend(darkStyle);
console.log(darkStyle.getAttribute('media'));Stylesheet per Button ein- und ausschalten
const styleEl = document.querySelector('svg style#highlight');
const toggle = document.querySelector('#toggle');
toggle.addEventListener('click', () => {
// 'not all' trifft nie zu und deaktiviert damit das Stylesheet
styleEl.media = styleEl.media === 'not all' ? 'all' : 'not all';
console.log(`Highlight-Stile: ${styleEl.media === 'all' ? 'an' : 'aus'}`);
});Prüfen, ob die Query aktuell zutrifft
const styleEl = document.querySelector('svg style');
const query = styleEl.media || 'all';
const aktiv = window.matchMedia(query).matches;
console.log(`Query "${query}" aktiv: ${aktiv}`);// Wichtig · Fallstricke
- Kein Syntaxcheck: Wenn man eine ungültige Media-Query setzt, wirft das keinen Fehler. Die Query wird dann als
not allausgewertet, das Stylesheet wird also einfach nicht angewendet. Vorher mitwindow.matchMedia()testen, ob sie wie erwartet funktioniert. - Leerer String: Ohne Attribut liefert die Eigenschaft
""und nicht"all". Man sollte also nicht auf"all"vergleichen. - Element im SVG-Namensraum: Dynamisch erzeugte Elemente brauchen
document.createElementNS('http://www.w3.org/2000/svg', 'style'). Mitdocument.createElement('style')entsteht einHTMLStyleElement. Das hat zwar auch eine Eigenschaftmedia, ist aber keinSVGStyleElement. - SVG als <img>: Wird die Grafik über
<img>oder CSSbackground-imageeingebunden, gelten die Media-Queries für den Bildbereich (z. B. dessen Breite) und nicht für das Browserfenster. Skripte laufen in diesem Fall gar nicht. - Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome, Firefox, Safari, Edge).