Signatur
Beschreibung
Die Eigenschaft systemLanguage steht auf allen Animationselementen wie <animate>, <animateTransform>, <animateMotion> und <set> zur Verfügung. Sie kommt aus der Mixin-Schnittstelle SVGTests und spiegelt das Attribut systemLanguage wider. Das Attribut enthält eine kommagetrennte Liste von BCP-47-Sprach-Tags, zum Beispiel "de, en-US".
Das Attribut gehört zur bedingten Verarbeitung in SVG. Eine Animation mit systemLanguage läuft nur dann, wenn eine der eingetragenen Sprachen zu den Spracheinstellungen des Benutzers passt. Sonst gilt die Bedingung als nicht erfüllt und die Animation wird nicht ausgeführt. So kann man sprachabhängige Animationen bauen, zum Beispiel einen Texteinblender, der nur für deutschsprachige Nutzer erscheint.
„Schreibgeschützt“ heißt hier nur: Man kann der Eigenschaft kein neues Objekt zuweisen. Die zurückgegebene SVGStringList ist dagegen live. Methoden wie appendItem(), removeItem() oder clear() ändern das Attribut direkt und umgekehrt.
Rückgabewert
numberOfItems === 0).Beispiele
Sprach-Tags einer Animation auslesen
// <svg><rect width="50" height="50">
// <animate id="anim" attributeName="x" from="0" to="100" dur="2s" systemLanguage="de, en-US"/>
// </rect></svg>
const anim = document.getElementById('anim');
const langs = anim.systemLanguage;
console.log(langs.numberOfItems);
for (let i = 0; i < langs.numberOfItems; i++) {
console.log(langs.getItem(i));
}Sprache zur Laufzeit ergänzen
const anim = document.querySelector('animate');
// Liste ist live – Änderungen wirken sich direkt auf das Attribut aus
anim.systemLanguage.appendItem('fr');
console.log(anim.getAttribute('systemLanguage'));Prüfen, ob die Animation zur Browsersprache passt
const anim = document.querySelector('animate');
const list = anim.systemLanguage;
const userLangs = navigator.languages.map((l) => l.toLowerCase());
const tags = Array.from({ length: list.numberOfItems }, (_, i) => list.getItem(i).toLowerCase());
const matches = tags.length === 0 || tags.some((tag) =>
userLangs.some((u) => u === tag || u.startsWith(`${tag}-`))
);
console.log(matches ? 'Animation wird ausgeführt' : 'Animation wird übersprungen');Sprachbeschränkung entfernen
const anim = document.querySelector('animate');
anim.systemLanguage.clear();
// Ohne Einträge gilt keine Sprachbedingung mehr
console.log(anim.systemLanguage.numberOfItems);
anim.beginElement();// Wichtig · Fallstricke
- Nur scheinbar schreibgeschützt:
anim.systemLanguage = …hat keine Wirkung und wirft im Strict Mode einenTypeError. Ändern lässt sich die Liste über ihre Methoden oder übersetAttribute('systemLanguage', …). - Die Trennzeichen im Attribut sind uneinheitlich. Laut SVG 2 sind Einträge kommagetrennt, aber manche Browser serialisieren die Liste beim Zurückschreiben mit Leerzeichen. Deshalb lieber die Liste auswerten als den Attribut-String.
- Wie Sprachen verglichen werden, hängt vom Browser ab. Meist passt
"en"auch zu"en-US", umgekehrt aber nicht immer. - Ein leeres Attribut
systemLanguage=""gilt als nicht erfüllt. Die Animation läuft dann nicht. Fehlt das Attribut ganz, gibt es keine Einschränkung. - Den Index-Zugriff
list[0]unterstützen nur moderne Browser.getItem()undnumberOfItemsfunktionieren überall. - Browser-Kompatibilität: Chrome, Edge, Firefox und Safari unterstützen die Eigenschaft. SMIL-Animationen selbst gelten wieder als stabil, waren aber zeitweise in Chrome als veraltet markiert.