SVGNumberList.insertItemBefore() — Methode · JavaScript-Referenz

Signatur

SVGNumberList.prototype.insertItemBefore(newItem, index)

Beschreibung

insertItemBefore() fügt ein SVGNumber-Objekt an Position index in eine SVGNumberList ein. Alle Elemente ab dieser Position rücken um eins nach hinten. Ist index größer oder gleich der Listenlänge, wird das Element einfach ans Ende angehängt.

SVGNumberList-Objekte bekommst du über die Eigenschaft baseVal eines SVGAnimatedNumberList, zum Beispiel über SVGTextElement.rotate (Attribut rotate), SVGFEColorMatrixElement.values, SVGFEConvolveMatrixElement.kernelMatrix oder SVGComponentTransferFunctionElement.tableValues. Änderungen an der Liste landen sofort im zugehörigen Attribut des Elements.

Ein neues SVGNumber erzeugst du mit SVGSVGElement.createSVGNumber(). Nach SVG 2 gilt: Gehört newItem schon zu einer Liste oder ist es an ein Attribut gebunden, wird eine Kopie eingefügt. Deshalb solltest du immer mit dem Rückgabewert weiterarbeiten, nicht mit dem übergebenen Objekt.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	SVGNumber		Das einzufügende Zahlenobjekt, meist erzeugt mit `svgElement.createSVGNumber()`.
$index Pflicht	number		Nullbasierte Position, an der eingefügt wird. Bei `0` landet das Element am Anfang. Werte ab `numberOfItems` hängen es ans Ende an.

Rückgabewert

Typ

SVGNumber

Beschreibung

Das tatsächlich eingefügte Element. Das kann eine Kopie von newItem sein.

Beispiele

Rotationswert am Anfang eines Textes einfügen

// HTML: <svg id="bild"><text id="t" x="10" y="40" rotate="10 20 30">ABCD</text></svg>
const svg = document.getElementById('bild');
const text = document.getElementById('t');
const liste = text.rotate.baseVal;

const zahl = svg.createSVGNumber();
zahl.value = 5;

liste.insertItemBefore(zahl, 0);
console.log(liste.numberOfItems);
console.log(text.getAttribute('rotate'));

4 5 10 20 30

Zu großer Index hängt ans Ende an

const svg = document.getElementById('bild');
const liste = document.getElementById('t').rotate.baseVal; // "10 20 30"

const zahl = svg.createSVGNumber();
zahl.value = 99;

const eingefuegt = liste.insertItemBefore(zahl, 1000);
console.log(eingefuegt.value, liste.getItem(liste.numberOfItems - 1).value);

99 99

Farbmatrix-Werte per Skript ergänzen

// HTML: <svg id="bild"><filter id="f"><feColorMatrix id="cm" type="saturate" values=""/></filter></svg>
const svg = document.getElementById('bild');
const werte = document.getElementById('cm').values.baseVal;

const saettigung = svg.createSVGNumber();
saettigung.value = 0.3;
werte.insertItemBefore(saettigung, 0);

console.log(document.getElementById('cm').getAttribute('values'));

0.3

// Wichtig · Fallstricke

Nur-Lese-Listen: Listen aus animVal sind schreibgeschützt. Ein Aufruf wirft dort eine DOMException vom Typ NoModificationAllowedError. Ändere daher immer baseVal.
Kopie statt Referenz: Wenn newItem schon in einer Liste steckt, fügen moderne Browser nach SVG 2 eine Kopie ein. Nach SVG 1.1 wurde es dagegen aus der alten Liste entfernt. Arbeite deshalb mit dem Rückgabewert weiter.
Das Argument muss ein echtes SVGNumber sein. Wenn du eine einfache Zahl übergibst, wirft der Browser einen TypeError.
Jede Änderung schreibt das Attribut neu und kann ein neues Rendern auslösen. Bei vielen Einfügungen ist es oft schneller, das Attribut einmal direkt mit setAttribute() zu setzen.
Die Methode wird in allen aktuellen Browsern unterstützt. Die Eigenschaft length als Alias für numberOfItems gibt es aber in älteren Browsern teilweise nicht.

Siehe auch

SVGNumberList SVGNumberList.appendItem() SVGNumberList.replaceItem() SVGNumberList.removeItem() SVGNumberList.getItem() SVGNumber SVGSVGElement.createSVGNumber()