SVGStringList.replaceItem() — Methode · JavaScript-Referenz

Signatur

SVGStringList.prototype.replaceItem(newItem, index)

Beschreibung

replaceItem() überschreibt einen vorhandenen Eintrag einer SVGStringList an einer bestimmten Position. Die Länge der Liste (numberOfItems bzw. length) bleibt gleich. Das zugehörige SVG-Attribut wird sofort aktualisiert, das Dokument also direkt verändert.

Eine SVGStringList bekommt man vor allem über die bedingten Verarbeitungsattribute der Schnittstelle SVGTests: element.systemLanguage (Attribut systemLanguage) und element.requiredExtensions (Attribut requiredExtensions). Mit replaceItem() kann man z. B. einen Sprachcode in einem <switch>-Zweig austauschen, ohne das ganze Attribut neu als Text zu setzen.

Anders als bei Listen mit Objekten (etwa SVGLengthList) sind die Einträge hier einfache Zeichenketten. Es entsteht also keine Verknüpfung zwischen Listen: Der Wert wird kopiert. Ist der Index ungültig, wird eine Ausnahme ausgelöst. Die Liste wird dabei nicht verändert.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	string		Die Zeichenkette, die den bisherigen Eintrag ersetzt, z. B. ein Sprachcode wie `"de"` oder eine Erweiterungs-URL.
$index Pflicht	number		Nullbasierte Position des zu ersetzenden Eintrags. Der Wert muss kleiner als `numberOfItems` sein.

Rückgabewert

Typ

string

Beschreibung

Den eingefügten Eintrag, also den Wert von newItem.

Beispiele

Sprachcode in systemLanguage austauschen

const svgNS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(svgNS, 'text');
text.setAttribute('systemLanguage', 'en, fr');

const langs = text.systemLanguage; // SVGStringList
const ersetzt = langs.replaceItem('de', 1);

console.log(ersetzt);
console.log(langs.numberOfItems);
console.log(text.getAttribute('systemLanguage'));

de 2 en de

Alle Einträge normalisieren (Kleinschreibung)

const el = document.querySelector('switch > text');
const list = el.systemLanguage;

for (let i = 0; i < list.numberOfItems; i++) {
  const wert = list.getItem(i);
  const normiert = wert.trim().toLowerCase();
  if (wert !== normiert) {
    list.replaceItem(normiert, i);
  }
}

console.log(el.getAttribute('systemLanguage'));

de-de en-us

Ungültigen Index abfangen

const svgNS = 'http://www.w3.org/2000/svg';
const g = document.createElementNS(svgNS, 'g');
g.setAttribute('systemLanguage', 'en');

try {
  g.systemLanguage.replaceItem('de', 5);
} catch (err) {
  console.log(err.name);
}

IndexSizeError

// Wichtig · Fallstricke

IndexSizeError: wird ausgelöst, wenn index größer oder gleich numberOfItems ist. Vorher mit numberOfItems bzw. length prüfen.
NoModificationAllowedError: wird ausgelöst, wenn die Liste schreibgeschützt ist.
Das Attribut requiredFeatures und damit element.requiredFeatures wurde in SVG 2 entfernt. Für neuen Code nur noch systemLanguage und requiredExtensions verwenden.
Beim Zurückschreiben ins Attribut trennen Browser die Einträge möglicherweise anders als im Original (z. B. Leerzeichen statt Komma). Wer den genauen Text braucht, sollte nicht auf die Serialisierung vertrauen.
Die Methode wird in allen modernen Browsern unterstützt. Eine Array-Schreibweise wie list[i] = wert funktioniert nur in manchen Browsern. replaceItem() ist der sichere Weg.

Siehe auch

SVGStringList SVGStringList.getItem() SVGStringList.insertItemBefore() SVGStringList.appendItem() SVGStringList.removeItem() SVGStringList.numberOfItems VideoTrackList.getTrackById()