SVGElement.style — Eigenschaft · JavaScript-Referenz

Signatur

SVGElement.style

Beschreibung

Die Eigenschaft style eines SVGElement gibt ein Objekt vom Typ CSSStyleProperties zurück (in älteren Spezifikationen und Browsern CSSStyleDeclaration). Es bildet das style-Attribut des Elements ab. Das Objekt ist aktiv: Änderungen daran schreibt der Browser sofort in das style-Attribut, und Änderungen am Attribut sind sofort im Objekt sichtbar.

Die Eigenschaft funktioniert genauso wie HTMLElement.style. Sie eignet sich, um SVG-Grafiken per Skript dynamisch zu gestalten, zum Beispiel fill, stroke, opacity oder transform bei Hover-Effekten, Animationen oder Datenvisualisierungen. CSS-Eigenschaften mit Bindestrich sprechen Sie in camelCase an (strokeWidth) oder über setProperty('stroke-width', …).

Die Eigenschaft selbst ist schreibgeschützt, Sie können ihr also kein neues Objekt zuweisen. Die Eigenschaften des zurückgegebenen Objekts sind aber beschreibbar. Wenn Sie einen String an element.style zuweisen, leiten die Browser ihn an style.cssText weiter. Dabei wird der gesamte Inline-Stil ersetzt.

Wichtig: style enthält nur Inline-Stile. Werte aus Stylesheets oder aus SVG-Präsentationsattributen wie fill="red" erscheinen hier nicht. Den tatsächlich angewendeten Wert liefert getComputedStyle().

Rückgabewert

Typ

CSSStyleProperties | CSSStyleDeclaration

Beschreibung

Ein aktives Objekt mit allen Inline-Stil-Deklarationen des Elements. Nicht gesetzte Eigenschaften liefern einen leeren String ''.

Beispiele

Füllfarbe und Kontur eines Kreises setzen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');

circle.style.fill = 'tomato';
circle.style.stroke = '#333';
circle.style.strokeWidth = '4px';

svg.append(circle);
document.body.append(svg);

console.log(circle.getAttribute('style'));

fill: tomato; stroke: rgb(51, 51, 51); stroke-width: 4px;

Inline-Stil vs. Präsentationsattribut vs. berechneter Stil

const rect = document.querySelector('svg rect'); // <rect fill="blue" width="10" height="10"/>

console.log(rect.style.fill);                   // Inline: nicht gesetzt
console.log(getComputedStyle(rect).fill);       // tatsächlich angewendet

rect.style.fill = 'green'; // Inline-Stil überschreibt das Attribut
console.log(getComputedStyle(rect).fill);

rgb(0, 0, 255) rgb(0, 128, 0)

Hover-Hervorhebung in einem Diagramm mit setProperty/removeProperty

const bars = document.querySelectorAll('#chart rect');

bars.forEach((bar) => {
  bar.addEventListener('mouseenter', () => {
    bar.style.setProperty('fill-opacity', '0.6');
    bar.style.setProperty('stroke', 'black', 'important');
  });
  bar.addEventListener('mouseleave', () => {
    // zurück zum Stylesheet-Wert
    bar.style.removeProperty('fill-opacity');
    bar.style.removeProperty('stroke');
  });
});

Eigene CSS-Variablen und Inline-Stil komplett ersetzen

const path = document.querySelector('svg path');

// CSS-Custom-Property, z. B. genutzt als fill: var(--accent)
path.style.setProperty('--accent', '#0a84ff');
console.log(path.style.getPropertyValue('--accent'));

// Ganzen Inline-Stil auf einmal ersetzen
path.style.cssText = 'stroke: red; stroke-dasharray: 4 2;';
console.log(path.style.length);

#0a84ff 2

// Wichtig · Fallstricke

Nur Inline-Stile: Präsentationsattribute wie fill="…" und Stylesheet-Regeln tauchen in style nicht auf. Den wirksamen Wert liefert getComputedStyle(el).
Vorrang: Inline-Stile schlagen Präsentationsattribute und normale Stylesheet-Regeln. Wenn Sie el.style.fill setzen, bleibt eine spätere Änderung per setAttribute('fill', …) scheinbar wirkungslos.
Nur CSS-Eigenschaften: Geometrie-Attribute wie cx, r oder width sind in SVG 2 teilweise als CSS-Eigenschaften definiert, werden aber nicht überall unterstützt. setAttribute() ist hier zuverlässiger.
Einheiten: Zahlen ohne Einheit werden bei Längen wie strokeWidth = 4 je nach Browser ignoriert. Geben Sie Werte als String mit Einheit an, etwa '4px'.
Namensräume: SVG-Elemente müssen mit createElementNS('http://www.w3.org/2000/svg', …) erzeugt werden. Sonst entsteht ein HTMLUnknownElement, das nichts darstellt.
CSP: Wenn Sie Stile über die CSSOM-Schnittstelle (el.style.x = …) setzen, verbietet eine Content Security Policy ohne 'unsafe-inline' das nicht. setAttribute('style', …) dagegen kann blockiert werden.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Typname CSSStyleProperties ist neu, ältere Browser melden CSSStyleDeclaration. Die API ist dieselbe.

Siehe auch

CSSPageRule.style SVGElement.nonce SVGElement.dataset SVGElement.tabIndex SVGElement.autofocus