SVGTransformList.numberOfItems — Eigenschaft · JavaScript-Referenz

Signatur

SVGTransformList.numberOfItems

Beschreibung

numberOfItems gibt an, wie viele einzelne Transformationen (z. B. translate, rotate, scale) aktuell in einer SVGTransformList stehen. Die Liste bekommt man meist über element.transform.baseVal (bzw. animVal) eines SVG-Elements wie <g>, <rect> oder <path>, bei Verläufen über gradientTransform und bei Mustern über patternTransform.

Man braucht den Wert vor allem, um mit getItem(index) über die Liste zu laufen, um zu prüfen, ob ein Element überhaupt transformiert ist, oder um vor einer Konsolidierung per consolidate() zu erfahren, wie viele Einzelschritte zusammengefasst werden.

Der Wert ist live: Er ändert sich sofort, wenn das transform-Attribut neu gesetzt wird oder Einträge über appendItem(), insertItemBefore(), removeItem(), clear() bzw. initialize() hinzukommen oder wegfallen. Seit SVG 2 gibt es zusätzlich die gleichwertige Eigenschaft length.

Rückgabewert

Typ

number

Beschreibung

Eine nicht negative ganze Zahl (unsigned long) – die Anzahl der Einträge in der Liste. 0 bedeutet, dass keine Transformation gesetzt ist.

Beispiele

Transformationen eines Elements zählen

const svgNS = 'http://www.w3.org/2000/svg';
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('transform', 'translate(10 20) rotate(45) scale(2)');

const list = rect.transform.baseVal;
console.log(list.numberOfItems);

3

Über alle Transformationen iterieren

const typeNames = {
  1: 'matrix', 2: 'translate', 3: 'scale',
  4: 'rotate', 5: 'skewX', 6: 'skewY'
};

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute('transform', 'translate(50 50) rotate(30) skewX(10)');

const list = g.transform.baseVal;
for (let i = 0; i < list.numberOfItems; i++) {
  const t = list.getItem(i);
  console.log(`${i}: ${typeNames[t.type]}`);
}

0: translate 1: rotate 2: skewX

Live-Verhalten beim Hinzufügen und Entfernen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
svg.append(circle);

const list = circle.transform.baseVal;
console.log('Start:', list.numberOfItems);

const t = svg.createSVGTransform();
t.setScale(1.5, 1.5);
list.appendItem(t);
console.log('Nach appendItem:', list.numberOfItems);

list.clear();
console.log('Nach clear:', list.numberOfItems);

Start: 0 Nach appendItem: 1 Nach clear: 0

Mehrere Transformationen zusammenfassen

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('transform', 'translate(5 5) scale(2) rotate(90)');

const list = path.transform.baseVal;
if (list.numberOfItems > 1) {
  list.consolidate(); // fasst alles zu einer Matrix zusammen
}
console.log(list.numberOfItems, list.getItem(0).type === SVGTransform.SVG_TRANSFORM_MATRIX);

1 true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie list.numberOfItems = 0 wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode einen TypeError aus. Zum Leeren gibt es clear().
Live-Wert: Wer in einer Schleife Einträge entfernt, sollte rückwärts iterieren oder die Länge nicht zwischenspeichern, sonst werden Indizes übersprungen oder getItem() wirft einen IndexSizeError.
baseVal und animVal: animVal ist schreibgeschützt und kann während SMIL-Animationen eine andere Anzahl haben als baseVal.
CSS-Transformationen (style.transform oder CSS-Regeln) tauchen in der Liste nicht auf; sie spiegelt nur das transform-Attribut wider.
consolidate() gibt bei einer leeren Liste null zurück; vorher numberOfItems prüfen.
Kompatibilität: wird von allen gängigen Browsern unterstützt. Die Alternative length (SVG 2) ist nicht in jeder älteren Engine vorhanden, numberOfItems ist die sicherere Wahl.

Siehe auch

SVGTransformList SVGTransformList.getItem() SVGTransformList.appendItem() SVGTransformList.clear() SVGTransformList.consolidate() SVGTransform SVGAnimatedTransformList