Signatur
Beschreibung
Die schreibgeschützte Eigenschaft requiredExtensions spiegelt das gleichnamige SVG-Attribut wider. Das Attribut enthält eine durch Leerzeichen getrennte Liste von URLs. Jede URL steht für eine Spracherweiterung, meist einen Namensraum wie http://www.w3.org/1999/xhtml oder http://www.w3.org/1998/Math/MathML. Das Element wird nur dargestellt, wenn der Browser alle aufgeführten Erweiterungen unterstützt.
requiredExtensions gehört zu den Attributen für die bedingte Verarbeitung, zusammen mit systemLanguage. Am meisten bringt es innerhalb eines <switch>-Elements: Dort wird das erste Kindelement angezeigt, dessen Bedingungen erfüllt sind. Ein typischer Fall ist ein <foreignObject> mit HTML-Inhalt, für den es eine reine SVG-Alternative gibt.
Die Eigenschaft selbst lässt sich nicht neu zuweisen. Die zurückgegebene SVGStringList ist aber live: Mit Methoden wie appendItem(), removeItem() oder clear() ändern Sie direkt das zugrunde liegende Attribut, und umgekehrt zeigt die Liste Änderungen per setAttribute() sofort an.
Rückgabewert
numberOfItems === 0). Die Einträge lesen Sie mit getItem(index); geändert wird die Liste über die Methoden von SVGStringList.Beispiele
Erweiterungen eines Elements auslesen
const svgNS = 'http://www.w3.org/2000/svg';
const fo = document.createElementNS(svgNS, 'foreignObject');
fo.setAttribute('requiredExtensions',
'http://www.w3.org/1999/xhtml http://www.w3.org/1998/Math/MathML');
const list = fo.requiredExtensions;
console.log(list.numberOfItems);
for (let i = 0; i < list.numberOfItems; i++) {
console.log(list.getItem(i));
}Liste live verändern – das Attribut zieht mit
const svgNS = 'http://www.w3.org/2000/svg';
const g = document.createElementNS(svgNS, 'g');
g.requiredExtensions.appendItem('http://www.w3.org/1999/xhtml');
console.log(g.getAttribute('requiredExtensions'));
g.requiredExtensions.clear();
console.log(g.requiredExtensions.numberOfItems);HTML-Inhalt mit SVG-Alternative in <switch>
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 200 50');
const sw = document.createElementNS(svgNS, 'switch');
// 1. Wahl: HTML über foreignObject
const fo = document.createElementNS(svgNS, 'foreignObject');
fo.setAttribute('width', '200');
fo.setAttribute('height', '50');
fo.requiredExtensions.appendItem('http://www.w3.org/1999/xhtml');
const div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.textContent = 'Formatierter HTML-Text';
fo.append(div);
// Alternative: reiner SVG-Text
const text = document.createElementNS(svgNS, 'text');
text.setAttribute('y', '30');
text.textContent = 'SVG-Alternative';
sw.append(fo, text);
svg.append(sw);
document.body.append(svg);
console.log(fo.requiredExtensions.getItem(0));// Wichtig · Fallstricke
- Nur lesbar: Eine Zuweisung wie
el.requiredExtensions = ...hat keine Wirkung und wirft im Strict Mode einenTypeError. Ändern Sie stattdessen die Liste über ihre Methoden oder das Attribut persetAttribute(). - Leerer Attributwert: Ist das Attribut gesetzt, aber leer (
requiredExtensions=""), gilt die Bedingung als nicht erfüllt. Das Element wird dann nicht dargestellt. Das ist nicht dasselbe wie ein fehlendes Attribut. - Unterstützung der Erweiterungen: Welche URLs ein Browser als unterstützt meldet, ist nicht einheitlich. Unbekannte URLs gelten als nicht unterstützt. Testen Sie daher immer mit einer Alternative im
<switch>. - Kompatibilität: Die Eigenschaft gibt es in allen modernen Browsern. In SVG 1.1 gehörte sie zur Schnittstelle
SVGTests, in SVG 2 zuSVGGraphicsElement. Das verwandterequiredFeatureswurde in SVG 2 entfernt.