SVGStyleElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGStyleElement extends SVGElement

Beschreibung

SVGStyleElement ist die DOM-Darstellung des <style>-Elements im SVG-Namensraum (http://www.w3.org/2000/svg). Es erbt von SVGElement und damit auch von Element, Node und EventTarget. Über dieses Interface lassen sich Stylesheets, die direkt in einer SVG-Grafik stehen, per Skript lesen, ändern, erzeugen oder abschalten.

Die wichtigsten Eigenschaften:

type – MIME-Typ des Stylesheets, normalerweise "text/css".
media – Media-Query-Liste, für die das Stylesheet gilt (z. B. "print" oder "(prefers-color-scheme: dark)").
title – Titel des Stylesheets, relevant für alternative Stylesheets.
disabled – boolescher Wert, mit dem man das Stylesheet ein- oder ausschaltet, ohne das Element zu entfernen.
sheet – das zugehörige CSSStyleSheet-Objekt (aus dem Mixin LinkStyle) oder null, solange das Element nicht im Dokument hängt.

Sinnvoll ist das Interface, wenn Sie SVG-Grafiken dynamisch umgestalten wollen, etwa für Themes (hell/dunkel), Hervorhebungen in Diagrammen oder Druckansichten. Mit sheet.insertRule() lassen sich Regeln gezielt hinzufügen, statt den gesamten Textinhalt neu zu schreiben.

Parameter

Name	Typ	Default	Beschreibung
$type	string	"" (wird als text/css behandelt)	Eigenschaft: MIME-Typ des Stylesheets. Spiegelt das Attribut `type`.
$media	string	"" (gilt für alle Medien)	Eigenschaft: Media-Query, für die das Stylesheet greift. Spiegelt das Attribut `media`.
$title	string	""	Eigenschaft: Titel des Stylesheets (für alternative Stylesheets).
$disabled	boolean	false	Eigenschaft: Ist sie `true`, wird das Stylesheet nicht angewendet. Kein Attribut-Gegenstück.
$sheet	CSSStyleSheet \| null	null	Nur lesbar: das zugehörige Stylesheet-Objekt; `null`, solange das Element nicht im Dokument eingefügt ist.

Rückgabewert

Typ

SVGStyleElement

Beschreibung

Instanzen erhält man über document.createElementNS("http://www.w3.org/2000/svg", "style") oder durch Abfragen eines vorhandenen <style>-Elements innerhalb eines <svg>.

Beispiele

SVG-style-Element erzeugen und einfügen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 100 100');

const style = document.createElementNS(SVG_NS, 'style');
style.textContent = '.punkt { fill: tomato; }';
svg.append(style);

const kreis = document.createElementNS(SVG_NS, 'circle');
kreis.setAttribute('class', 'punkt');
kreis.setAttribute('cx', '50');
kreis.setAttribute('cy', '50');
kreis.setAttribute('r', '40');
svg.append(kreis);

document.body.append(svg);
console.log(style instanceof SVGStyleElement);
console.log(style.sheet.cssRules.length);

true 1

Regel über das sheet-Objekt hinzufügen

// Vorhandenes <style> in einem Inline-SVG
const style = document.querySelector('svg style');

if (style?.sheet) {
  style.sheet.insertRule('.aktiv { stroke: gold; stroke-width: 4; }', style.sheet.cssRules.length);
  document.querySelector('svg circle')?.classList.add('aktiv');
  console.log([...style.sheet.cssRules].map((r) => r.selectorText));
}

[".punkt", ".aktiv"]

Dunkles Theme per disabled umschalten

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const dunkel = document.createElementNS(SVG_NS, 'style');
dunkel.title = 'dunkel';
dunkel.textContent = 'circle { fill: #222; } text { fill: #eee; }';
svg.append(dunkel);

const toggleTheme = () => {
  dunkel.disabled = !dunkel.disabled;
  console.log(`Dunkles Theme ${dunkel.disabled ? 'aus' : 'an'}`);
};

document.querySelector('#theme-button')?.addEventListener('click', toggleTheme);
toggleTheme();

Dunkles Theme aus

Stylesheet nur für den Druck

const style = document.querySelector('svg style');
style.media = 'print';
console.log(style.media, style.sheet.media.mediaText);

print print

// Wichtig · Fallstricke

Namensraum beachten: document.createElement('style') erzeugt ein HTMLStyleElement, kein SVGStyleElement. Für SVG immer createElementNS('http://www.w3.org/2000/svg', 'style') verwenden.
Globale Wirkung: CSS in einem <style> eines Inline-SVG gilt für das gesamte HTML-Dokument, nicht nur für die Grafik. Selektoren deshalb eindeutig wählen (z. B. mit einer ID des <svg> als Präfix). Bei SVGs, die per <img> oder <object> eingebunden sind, bleibt der Stil gekapselt.
sheet ist null, solange das Element nicht im Dokument hängt, und auch, wenn type einen nicht unterstützten Wert hat.
disabled wird erst seit etwa 2022 von allen großen Browsern unterstützt; in älteren Umgebungen alternativ style.sheet.disabled setzen. Setzt man disabled vor dem Einfügen, ist die Eigenschaft wirkungslos.
Sicherheit: Keine ungeprüften Benutzereingaben in textContent des Styles schreiben – CSS-Injection kann Layouts manipulieren oder über Attribut-Selektoren mit url() Daten abgreifen. Eine strenge Content Security Policy (style-src) kann Inline-Styles blockieren.

Siehe auch

SVGFETileElement SVGStopElement SVGTitleElement HTMLStyleElement SVGCircleElement