SVGLengthList.initialize() — Methode · JavaScript-Referenz

Signatur

SVGLengthList.prototype.initialize(newItem)

Beschreibung

Die Methode initialize() der Schnittstelle SVGLengthList entfernt alle vorhandenen Einträge aus der Liste und fügt anschließend das übergebene SVGLength-Objekt als einziges Element ein. Das Ergebnis entspricht einem clear() gefolgt von appendItem(newItem), erfolgt aber in einem einzigen Aufruf.

Längenlisten gibt es vor allem bei den Attributen x, y, dx und dy der Elemente <text> und <tspan>. Dort legen sie die Position einzelner Zeichen fest. Mit initialize() setzt du eine Liste mit mehreren Werten (z. B. x="10 20 30") auf einen einzigen Wert zurück, ohne das Attribut als Zeichenkette neu zu schreiben.

Die Änderung wirkt sofort auf das zugehörige Attribut. Nach dem Aufruf zeigt getAttribute('x') also den neuen Wert. Ändern kannst du nur die Basisliste (baseVal). Die animierte Liste (animVal) ist schreibgeschützt.

Laut SVG 2 wird eine Kopie eingefügt, wenn newItem schon zu einer anderen Liste gehört oder ein Attribut abbildet. In diesem Fall gibt die Methode die Kopie zurück und nicht das übergebene Objekt. Arbeite danach deshalb immer mit dem Rückgabewert weiter.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	SVGLength		Das `SVGLength`-Objekt, das nach dem Leeren als einziges Element in der Liste steht. Du erzeugst es z. B. mit `svgElement.createSVGLength()`.

Rückgabewert

Typ

SVGLength

Beschreibung

Das tatsächlich eingefügte Element. Das ist entweder newItem selbst oder eine Kopie davon, wenn das Objekt schon zu einer anderen Liste gehörte.

Beispiele

Mehrere x-Positionen auf eine einzige zurücksetzen

const svg = document.querySelector('svg');
const text = svg.querySelector('text'); // <text x="10 20 30">ABC</text>

const xList = text.x.baseVal;
console.log(xList.numberOfItems); // 3

const len = svg.createSVGLength();
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, 50);

const inserted = xList.initialize(len);
console.log(xList.numberOfItems, inserted.value);
console.log(text.getAttribute('x'));

3 1 50 50

Liste zurücksetzen und danach neu aufbauen

const svg = document.querySelector('svg');
const text = svg.querySelector('text');
const dxList = text.dx.baseVal;

// Hilfsfunktion: erzeugt eine Länge in Pixeln
const px = (v) => {
  const l = svg.createSVGLength();
  l.value = v;
  return l;
};

// Zeichenabstände neu festlegen: 0, 4, 8, 12
dxList.initialize(px(0));
[4, 8, 12].forEach((v) => dxList.appendItem(px(v)));

console.log(text.getAttribute('dx'));

0 4 8 12

Schreibversuch auf animVal abfangen

const svg = document.querySelector('svg');
const text = svg.querySelector('text');

try {
  text.x.animVal.initialize(svg.createSVGLength());
} catch (err) {
  console.log(err.name);
}

NoModificationAllowedError

// Wichtig · Fallstricke

Schreibschutz: Wenn du initialize() auf animVal oder einer anderen schreibgeschützten Liste aufrufst, wird eine DOMException vom Typ NoModificationAllowedError ausgelöst.
Falscher Typ: Ist das Argument kein SVGLength, wird ein TypeError ausgelöst.
Kopie statt Referenz: Gehört newItem schon zu einer anderen Liste, fügen moderne Browser eine Kopie ein. Änderungen am ursprünglichen Objekt wirken sich dann nicht auf die Liste aus. Verwende deshalb den Rückgabewert.
Nur ein Element: Mit initialize() fügst du immer genau ein Element ein. Weitere Werte ergänzt du mit appendItem(). Ganz leeren kannst du die Liste mit clear().
Kompatibilität: Die Methode wird in allen aktuellen Browsern seit SVG 1.1 unterstützt. Ältere Browser fügten teilweise das Originalobjekt ein statt einer Kopie.

Siehe auch

SVGLengthList SVGLengthList.clear() SVGLengthList.appendItem() SVGLengthList.replaceItem() SVGLength SVGSVGElement.createSVGLength() CustomElementRegistry.initialize()