SVGStringList.initialize() — Methode · JavaScript-Referenz

Signatur

SVGStringList.prototype.initialize(newItem)

Beschreibung

Die Methode initialize() der Schnittstelle SVGStringList entfernt alle vorhandenen Einträge aus der Liste. Danach enthält die Liste nur noch den übergebenen String. Die Methode ist eine Kurzform für clear() mit anschließendem appendItem().

In der Praxis begegnet man SVGStringList vor allem bei den Eigenschaften systemLanguage und requiredExtensions von SVG-Elementen wie <circle>, <g>, <text> oder <switch>. Diese Listen sind live an das zugehörige Attribut gekoppelt: Wer die Liste mit initialize() ändert, ändert gleichzeitig das Attribut im DOM.

Sinnvoll ist initialize(), wenn ein Element nur noch unter genau einer Bedingung angezeigt werden soll, zum Beispiel wenn beim Sprachwechsel in einem <switch>-Block nur noch eine Sprache gelten soll. So lässt sich der Wert setzen, ohne das Attribut selbst als String zusammenzubauen.

Parameter

Name	Typ	Default	Beschreibung
$newItem Pflicht	string		Der String, der nach dem Leeren der Liste als einziger Eintrag eingefügt wird, z. B. ein Sprachcode wie `"de"`. Andere Werte werden in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der eingefügte String, also der Wert, der jetzt in der Liste steht.

Beispiele

systemLanguage auf eine einzige Sprache setzen

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

const langs = text.systemLanguage; // SVGStringList
console.log(langs.numberOfItems); // 3

const result = langs.initialize('de');
console.log(result);
console.log(langs.numberOfItems);
console.log(text.getAttribute('systemLanguage'));

3 de 1 de

Sprachwechsel in einem <switch>-Block

// HTML: <svg><switch id="greet">
//   <text systemLanguage="de">Hallo</text>
//   <text systemLanguage="en">Hello</text>
// </switch></svg>

const setGreetingLanguage = (lang) => {
  const texts = document.querySelectorAll('#greet > text');
  texts.forEach((el, i) => {
    // erster Text bekommt die gewünschte Sprache, der Rest wird ausgeschlossen
    el.systemLanguage.initialize(i === 0 ? lang : 'x-none');
  });
};

setGreetingLanguage(navigator.language.slice(0, 2));

Liste zurücksetzen und danach erweitern

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

const list = g.systemLanguage;
list.initialize('de');
list.appendItem('de-AT');
list.appendItem('de-CH');

const items = Array.from({ length: list.numberOfItems }, (_, i) => list.getItem(i));
console.log(items);

["de", "de-AT", "de-CH"]

// Wichtig · Fallstricke

Nur-Lese-Listen: Ist die Liste schreibgeschützt, wirft initialize() eine DOMException vom Typ NoModificationAllowedError.
Alle Einträge gehen verloren: Die bisherigen Einträge werden ohne Rückfrage entfernt. Wer nur etwas ergänzen will, nutzt appendItem() oder insertItemBefore().
Live-Kopplung: Jede Änderung wird sofort in das zugehörige Attribut geschrieben, etwa systemLanguage. Das kann die Darstellung innerhalb von <switch> direkt verändern.
Kein echtes Array: SVGStringList hat keine Methoden wie map oder forEach. Einträge liest man mit getItem(i) und numberOfItems bzw. length aus.
Kompatibilität: Wird von allen modernen Browsern unterstützt. requiredFeatures wurde in SVG 2 entfernt. Für neuen Code sollte man deshalb systemLanguage oder requiredExtensions verwenden.

Siehe auch

SVGStringList SVGStringList.clear() SVGStringList.appendItem() SVGStringList.replaceItem() SVGStringList.getItem() SVGGraphicsElement.systemLanguage ViewTransition.waitUntil()