SVGGraphicsElement.systemLanguage — Eigenschaft · JavaScript-Referenz

Signatur

get SVGGraphicsElement.systemLanguage

Beschreibung

Die schreibgeschützte Eigenschaft systemLanguage gibt das systemLanguage-Attribut eines SVG-Grafikelements als SVGStringList zurück. Das Attribut enthält eine kommagetrennte Liste von Sprachkennungen nach BCP 47 (z. B. de, en-US). Ein Element wird nur dann dargestellt, wenn mindestens eine dieser Sprachen zu den bevorzugten Sprachen des Benutzers passt.

Seinen eigentlichen Nutzen entfaltet das Attribut innerhalb eines <switch>-Elements: Der Browser rendert dort nur das erste Kindelement, dessen Bedingungsattribute (systemLanguage, requiredExtensions) erfüllt sind. So lassen sich mehrsprachige Beschriftungen, Diagramme oder Infografiken in einer einzigen SVG-Datei ausliefern.

„Schreibgeschützt“ bezieht sich nur auf die Eigenschaft selbst – Sie können ihr kein neues Objekt zuweisen. Die zurückgegebene SVGStringList ist jedoch lebendig und veränderbar: Methoden wie appendItem(), removeItem() oder clear() ändern direkt das zugrunde liegende Attribut. Alternativ können Sie mit setAttribute('systemLanguage', …) arbeiten.

Rückgabewert

Typ

SVGStringList

Beschreibung

Eine lebende Liste der im Attribut angegebenen Sprachkennungen. Ist das Attribut nicht gesetzt, ist die Liste leer (numberOfItems === 0).

Beispiele

Sprachkennungen eines Elements auslesen

// <svg><text id="gruss" systemLanguage="de, de-AT">Hallo</text></svg>
const text = document.getElementById('gruss');
const sprachen = text.systemLanguage;

console.log(sprachen.numberOfItems);
for (let i = 0; i < sprachen.numberOfItems; i++) {
  console.log(sprachen.getItem(i));
}

2 de de-AT

Mehrsprachige Beschriftung per <switch> dynamisch erzeugen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const sw = document.createElementNS(NS, 'switch');

const texte = { de: 'Umsatz', fr: 'Chiffre d’affaires', en: 'Revenue' };

for (const [lang, label] of Object.entries(texte)) {
  const t = document.createElementNS(NS, 'text');
  t.setAttribute('x', '10');
  t.setAttribute('y', '20');
  t.systemLanguage.appendItem(lang); // setzt das Attribut
  t.textContent = label;
  sw.append(t);
}

// Fallback ohne Bedingung – greift, wenn keine Sprache passt
const fallback = document.createElementNS(NS, 'text');
fallback.setAttribute('x', '10');
fallback.setAttribute('y', '20');
fallback.textContent = 'Revenue';
sw.append(fallback);

svg.append(sw);
document.body.append(svg);
console.log(sw.firstElementChild.getAttribute('systemLanguage'));

de

Sprachliste nachträglich anpassen

const rect = document.querySelector('rect[systemLanguage]');
const liste = rect.systemLanguage;

liste.clear();              // alle Einträge entfernen
liste.appendItem('en-US');
liste.appendItem('en-GB');

console.log(liste.length);
// Eigenschaft selbst kann nicht ersetzt werden:
rect.systemLanguage = null; // wird ignoriert (im Strict Mode: TypeError)
console.log(rect.systemLanguage instanceof SVGStringList);

2 true

// Wichtig · Fallstricke

Nur Getter: Eine Zuweisung an element.systemLanguage wird still ignoriert bzw. wirft im Strict Mode einen TypeError. Ändern Sie stattdessen die Liste oder nutzen Sie setAttribute().
Groß-/Kleinschreibung des Attributs: Im SVG-DOM heißt das Attribut systemLanguage (camelCase). In HTML-Dokumenten mit Inline-SVG korrigiert der Parser die Schreibweise automatisch, bei createElementNS + setAttribute müssen Sie sie jedoch exakt so schreiben.
Abgleich: Browser vergleichen mit den Benutzersprachen (vgl. navigator.languages). Ein Eintrag en passt auch auf en-US, umgekehrt nicht in jedem Browser zuverlässig – geben Sie im Zweifel die Primärsprache mit an.
Außerhalb von <switch>: Ist die Bedingung nicht erfüllt, wird das Element nicht gerendert, bleibt aber im DOM erhalten. Das kann bei Layout-Berechnungen wie getBBox() zu unerwarteten Werten führen.
Kompatibilität: Von Chrome, Edge, Firefox und Safari unterstützt. Das verwandte Attribut requiredFeatures ist in SVG 2 entfallen; verlassen Sie sich nicht darauf.

Siehe auch

SVGGraphicsElement SVGGraphicsElement.requiredExtensions SVGStringList SVGSwitchElement Navigator.languages Element.setAttribute() Summarizer.expectedInputLanguages