SVGTransformList.length — Eigenschaft · JavaScript-Referenz

Signatur

SVGTransformList.length

Beschreibung

Die Eigenschaft length gibt an, wie viele SVGTransform-Objekte eine SVGTransformList gerade enthält. Solche Listen erhält man meist über element.transform.baseVal (bzw. animVal) eines SVG-Elements, über gradientTransform bei Verläufen oder patternTransform bei Mustern.

length wurde mit SVG 2 eingeführt und liefert denselben Wert wie die ältere Eigenschaft numberOfItems. Sie macht die Liste „array-ähnlicher“, sodass klassische for-Schleifen mit getItem(i) oder dem Indexzugriff list[i] gut lesbar werden.

Der Wert ist live: Fügt man mit appendItem() oder insertItemBefore() Transformationen hinzu, entfernt sie mit removeItem()/clear() oder ändert das transform-Attribut per setAttribute(), passt sich length sofort an. Nach consolidate() ist die Länge 1 (bzw. 0 bei leerer Liste).

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl (unsigned long) mit der Anzahl der Einträge in der Liste; 0, wenn keine Transformation gesetzt ist.

Beispiele

Anzahl der Transformationen eines Elements ermitteln

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

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

3 3

Alle Transformationen durchlaufen und Typ ausgeben

const typeNames = {
  [SVGTransform.SVG_TRANSFORM_MATRIX]: 'matrix',
  [SVGTransform.SVG_TRANSFORM_TRANSLATE]: 'translate',
  [SVGTransform.SVG_TRANSFORM_SCALE]: 'scale',
  [SVGTransform.SVG_TRANSFORM_ROTATE]: 'rotate',
  [SVGTransform.SVG_TRANSFORM_SKEWX]: 'skewX',
  [SVGTransform.SVG_TRANSFORM_SKEWY]: 'skewY'
};

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

const list = g.transform.baseVal;
for (let i = 0; i < list.length; i++) {
  const t = list.getItem(i);
  console.log(i, typeNames[t.type], t.angle);
}

0 translate 0 1 skewX 10

Live-Verhalten beim Hinzufügen und Zusammenfassen

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

const list = circle.transform.baseVal;
console.log(list.length); // 0

const t = svg.createSVGTransform();
t.setTranslate(50, 50);
list.appendItem(t);

const r = svg.createSVGTransform();
r.setRotate(30, 0, 0);
list.appendItem(r);
console.log(list.length); // 2

list.consolidate();
console.log(list.length); // 1
console.log(circle.getAttribute('transform'));

0 2 1 matrix(0.866025 0.5 -0.5 0.866025 50 50)

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie list.length = 0 wird ignoriert (im Strict Mode TypeError). Zum Leeren list.clear() verwenden.
Kein echtes Array: Methoden wie map() oder forEach() fehlen; bei Bedarf mit Array.from({ length: list.length }, (_, i) => list.getItem(i)) umwandeln.
Kompatibilität: length stammt aus SVG 2 und wird von allen aktuellen Browsern unterstützt. Für sehr alte Engines (z. B. alter Internet Explorer) auf numberOfItems zurückgreifen.
animVal ist schreibgeschützt; Änderungen (und damit Längenänderungen) sind nur über baseVal möglich. Während einer SMIL-Animation können sich baseVal.length und animVal.length unterscheiden.
CSS-Transformationen (Eigenschaft transform im Stylesheet) tauchen in der Liste nicht auf – sie spiegelt nur das Attribut wider.

Siehe auch

SVGTransformList SVGTransformList.numberOfItems SVGTransformList.getItem() SVGTransformList.appendItem() SVGTransformList.consolidate() SVGTransform DataTransferItemList.length