Signatur
Beschreibung
Die Eigenschaft requiredExtensions gehört zum Mixin SVGTests, das unter anderem von SVGAnimationElement (also <animate>, <animateMotion>, <animateTransform> und <set>) implementiert wird. Sie spiegelt das gleichnamige Attribut wider. Das Attribut enthält eine durch Leerzeichen getrennte Liste von URIs, die Spracherweiterungen bezeichnen, z. B. http://www.w3.org/1999/xhtml.
Das Attribut wird für die bedingte Verarbeitung genutzt: Unterstützt der Browser nicht alle aufgeführten Erweiterungen, gilt die Bedingung als nicht erfüllt. Bei Animationselementen bedeutet das: Die Animation wird nicht ausgeführt. Innerhalb eines <switch>-Elements entscheidet die Bedingung außerdem, welches Kindelement gerendert wird.
Die Eigenschaft selbst ist schreibgeschützt, das heißt, man kann ihr kein neues Objekt zuweisen. Die zurückgegebene SVGStringList ist aber live und veränderbar: Mit appendItem(), removeItem(), clear() oder initialize() lässt sich der Inhalt ändern. Jede Änderung wird sofort ins Attribut übernommen, und umgekehrt zeigt die Liste Änderungen am Attribut direkt an.
Rückgabewert
requiredExtensions angegebenen Erweiterungs-URIs. Fehlt das Attribut, ist die Liste leer (numberOfItems === 0).Beispiele
Erweiterungs-URIs eines <animate>-Elements auslesen
const SVG_NS = 'http://www.w3.org/2000/svg';
const animate = document.createElementNS(SVG_NS, 'animate');
animate.setAttribute('requiredExtensions',
'http://www.w3.org/1999/xhtml http://example.com/meine-erweiterung');
const list = animate.requiredExtensions;
console.log(list.numberOfItems);
for (let i = 0; i < list.numberOfItems; i++) {
console.log(list.getItem(i));
}Liste per SVGStringList-Methoden ändern
const animate = document.querySelector('animate');
const ext = animate.requiredExtensions;
ext.clear();
ext.appendItem('http://www.w3.org/1999/xhtml');
// Die Änderung steht sofort im Attribut
console.log(animate.getAttribute('requiredExtensions'));
// Direkte Zuweisung hat keine Wirkung (bzw. TypeError im Strict Mode)
// animate.requiredExtensions = 'x';Prüfen, warum eine Animation nicht startet
const debugAnimations = (svg) => {
svg.querySelectorAll('animate, animateMotion, animateTransform, set')
.forEach((el) => {
const ext = el.requiredExtensions;
if (ext.numberOfItems > 0) {
const uris = Array.from({ length: ext.numberOfItems }, (_, i) => ext.getItem(i));
console.warn(`<${el.localName}> hängt von Erweiterungen ab:`, uris);
}
});
};
debugAnimations(document.querySelector('svg'));// Wichtig · Fallstricke
- Schreibgeschützt heißt nicht unveränderlich: Du kannst der Eigenschaft nichts zuweisen, die zurückgegebene Liste kannst du aber ändern. Alternativ setzt du das Attribut mit
setAttribute(). - Browser unterstützen praktisch keine Erweiterungen außer (teilweise) dem XHTML-Namensraum. Jede unbekannte URI führt dazu, dass die Bedingung als nicht erfüllt gilt. Die Animation läuft dann ohne Fehlermeldung nicht.
- Ist das Attribut vorhanden, aber leer (
requiredExtensions=""), gilt die Bedingung ebenfalls als nicht erfüllt. Das ist ein Unterschied zu einem fehlenden Attribut. - Das verwandte Attribut
requiredFeatureswurde in SVG 2 entfernt. Für bedingte Verarbeitung stehen nur nochrequiredExtensionsundsystemLanguagezur Verfügung. - Die Methoden von
SVGStringListsind 0-basiert.getItem()mit einem ungültigen Index wirft einenIndexSizeError.