SVGElement.attributeStyleMap — Eigenschaft · JavaScript-Referenz

Signatur

SVGElement.attributeStyleMap

Beschreibung

Die schreibgeschützte Eigenschaft attributeStyleMap gehört zur CSS Typed Object Model API (CSS Typed OM). Sie liefert ein StylePropertyMap-Objekt, das die im Inline-style-Attribut eines SVG-Elements deklarierten Eigenschaften abbildet. Anders als bei element.style bekommst du die Werte nicht als Zeichenketten zurück, sondern als typisierte Objekte wie CSSUnitValue, CSSKeywordValue oder CSSTransformValue.

Die Map ist aktiv (live): Änderungen über set(), append(), delete() oder clear() wirken sich sofort auf das style-Attribut aus, und umgekehrt spiegeln sich Änderungen am Attribut direkt in der Map wider. Die Eigenschaft selbst kann nicht neu zugewiesen werden, der Inhalt der Map aber schon.

Praktisch ist attributeStyleMap vor allem bei Animationen und dynamischen Grafiken: Du rechnest mit Zahlen und Einheiten, statt Zeichenketten wie "12.5px" zu parsen und wieder zusammenzusetzen. Das ist weniger fehleranfällig und kann in Browsern mit Typed OM auch schneller sein. Beachte, dass nur Inline-Stile erfasst werden. Die tatsächlich berechneten Werte (inklusive Stylesheets) liefert computedStyleMap().

Rückgabewert

Typ

StylePropertyMap

Beschreibung

Aktive Map der Inline-Stileigenschaften des Elements mit den Methoden get(), getAll(), has(), set(), append(), delete(), clear() sowie der Eigenschaft size. Die Map ist iterierbar.

Beispiele

Inline-Stile eines SVG-Kreises typisiert auslesen

// <svg><circle id="punkt" cx="50" cy="50" r="20" style="fill: tomato; stroke-width: 4px; opacity: 0.8" /></svg>
const kreis = document.querySelector('#punkt');
const stile = kreis.attributeStyleMap;

const breite = stile.get('stroke-width');
console.log(breite.value, breite.unit);
console.log(stile.get('opacity').value);
console.log(stile.size);

for (const [name, [wert]] of stile) {
  console.log(name, '→', wert.toString());
}

4 px 0.8 3 fill → tomato opacity → 0.8 stroke-width → 4px

Stile mit CSS-Einheiten setzen und entfernen

const rechteck = document.querySelector('svg rect');

// Typisierte Werte über die CSS-Fabrikfunktionen
rechteck.attributeStyleMap.set('stroke-width', CSS.px(3));
rechteck.attributeStyleMap.set('opacity', CSS.number(0.5));
rechteck.attributeStyleMap.set('fill', 'steelblue'); // Zeichenketten gehen auch

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

rechteck.attributeStyleMap.delete('opacity');
console.log(rechteck.attributeStyleMap.has('opacity'));

stroke-width: 3px; opacity: 0.5; fill: steelblue; false

Pulsierende Linienstärke ohne String-Parsing animieren

const pfad = document.querySelector('svg path');
pfad.attributeStyleMap.set('stroke-width', CSS.px(2));

let wachsend = true;
const schritt = () => {
  const aktuell = pfad.attributeStyleMap.get('stroke-width');
  let neu = aktuell.value + (wachsend ? 0.2 : -0.2);
  if (neu >= 8) wachsend = false;
  if (neu <= 2) wachsend = true;
  pfad.attributeStyleMap.set('stroke-width', CSS.px(neu));
  requestAnimationFrame(schritt);
};

// Feature-Erkennung vor der Nutzung
if ('attributeStyleMap' in SVGElement.prototype) {
  requestAnimationFrame(schritt);
} else {
  pfad.style.strokeWidth = '4px'; // Fallback
}

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser (Chrome, Edge, Opera) unterstützen CSS Typed OM seit Version 66, Safari seit 16.4. Firefox unterstützt die API standardmäßig nicht. Prüfe deshalb vorher mit 'attributeStyleMap' in SVGElement.prototype und sieh einen Fallback über element.style vor.
Nur Inline-Stile: Werte aus Stylesheets oder aus SVG-Präsentationsattributen wie fill="red" erscheinen nicht in der Map. Diese Werte bekommst du über element.computedStyleMap().
get() liefert undefined, wenn die Eigenschaft nicht inline gesetzt ist. Vor dem Zugriff auf .value solltest du das prüfen.
Ungültige Werte führen bei set() zu einem TypeError, statt stillschweigend ignoriert zu werden wie bei element.style.
Werte, die der Browser nicht genauer typisieren kann, etwa manche Farben, kommen als CSSStyleValue oder CSSUnparsedValue zurück. In diesem Fall hilft toString().
Die Eigenschaft selbst ist schreibgeschützt. el.attributeStyleMap = … hat keine Wirkung, im Strict Mode wirft die Zuweisung einen Fehler.

Siehe auch

StylePropertyMap HTMLElement.attributeStyleMap Element.computedStyleMap() SVGElement.style CSSUnitValue SVGElement MathMLElement.attributeStyleMap