SVGNumberList.appendItem() — Methode · JavaScript-Referenz

Signatur

SVGNumberList.prototype.appendItem(newItem)

Beschreibung

Die Methode appendItem() hängt ein neues Element an das Ende einer SVGNumberList an. Solche Listen finden sich an SVG-Attributen, die eine Liste von Zahlen enthalten, zum Beispiel rotate an <text>/<tspan> (SVGTextPositioningElement.rotate), tableValues an <feFuncR> & Co. oder values an <feColorMatrix>. Du erreichst die Liste über die Eigenschaft baseVal des zugehörigen SVGAnimatedNumberList-Objekts.

Das neue Element muss ein SVGNumber-Objekt sein. Es wird über SVGSVGElement.createSVGNumber() erzeugt, danach setzt du dessen Eigenschaft value. Sobald die Liste geändert wird, aktualisiert der Browser automatisch das zugehörige Attribut im DOM, und die Darstellung ändert sich sofort.

Gehört das übergebene Objekt schon zu einer anderen Liste oder spiegelt es direkt ein Attribut wider, legt der Browser nach SVG 2 eine Kopie an und fügt diese ein. Nach SVG 1.1 wurde das Objekt dagegen aus seiner bisherigen Liste entfernt. Verwende deshalb immer den Rückgabewert, wenn du das eingefügte Element später weiter ändern willst.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	SVGNumber		Das anzuhängende Zahlenobjekt. Du erzeugst es mit `svgRoot.createSVGNumber()`. Andere Typen, etwa eine einfache `number`, lösen einen `TypeError` aus.

Rückgabewert

Typ

SVGNumber

Beschreibung

Das tatsächlich eingefügte SVGNumber-Objekt. Das kann eine Kopie von newItem sein, zum Beispiel wenn newItem bereits zu einer anderen Liste gehörte.

Beispiele

Zeichenrotation eines Textes erweitern

const svg = document.querySelector('svg');
const text = svg.querySelector('text'); // <text rotate="0 10">Hallo</text>

const list = text.rotate.baseVal;
const num = svg.createSVGNumber();
num.value = 20;

const inserted = list.appendItem(num);

console.log(list.numberOfItems);
console.log(text.getAttribute('rotate'));
console.log(inserted.value);

3 0 10 20 20

Übertragungstabelle eines Filters dynamisch aufbauen

const svg = document.querySelector('svg');
const feFuncR = svg.querySelector('feFuncR'); // <feFuncR type="table"/>

const table = feFuncR.tableValues.baseVal;
table.clear();

// Rotkanal umkehren: 1 → 0
[1, 0.5, 0].forEach((v) => {
  const n = svg.createSVGNumber();
  n.value = v;
  table.appendItem(n);
});

console.log(feFuncR.getAttribute('tableValues'));

1 0.5 0

Fehler beim Schreiben in animVal

const svg = document.querySelector('svg');
const text = svg.querySelector('text');
const n = svg.createSVGNumber();
n.value = 45;

try {
  text.rotate.animVal.appendItem(n);
} catch (err) {
  console.log(err.name);
}

NoModificationAllowedError

// Wichtig · Fallstricke

Nur baseVal ist beschreibbar: animVal ist schreibgeschützt. Ein Aufruf auf dieser Liste löst eine DOMException vom Typ NoModificationAllowedError aus.
Kopie statt Original: Nach SVG 2 wird ein Objekt, das schon zu einer Liste gehört, kopiert. Spätere Änderungen an newItem wirken sich dann nicht auf die Liste aus. Arbeite deshalb mit dem Rückgabewert.
createSVGNumber() gibt es nur an SVGSVGElement, also am <svg>-Element, nicht an beliebigen SVG-Elementen.
Bei vielen Änderungen ist es oft einfacher und schneller, das Attribut direkt zu setzen, z. B. setAttribute('rotate', '0 10 20').
Kompatibilität: Die Methode wird von allen aktuellen Browsern unterstützt. Ob Objekte kopiert oder verschoben werden (SVG 1.1 gegenüber SVG 2), kann sich in älteren Browserversionen unterscheiden.

Siehe auch

SVGNumberList SVGNumberList.insertItemBefore() SVGNumberList.replaceItem() SVGNumberList.removeItem() SVGNumberList.clear() SVGNumber SVGSVGElement.createSVGNumber() SVGAnimatedNumberList