SVGSwitchElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGSwitchElement extends SVGGraphicsElement

Beschreibung

SVGSwitchElement ist die DOM-Schnittstelle zum SVG-Element <switch>. Ein <switch> prüft seine direkten Kindelemente der Reihe nach und rendert nur das erste, dessen Bedingungsattribute zutreffen: systemLanguage, requiredExtensions und (in SVG 1.1) requiredFeatures. Alle übrigen Kinder werden nicht dargestellt, bleiben aber im DOM erhalten.

Typische Einsätze sind sprachabhängige Beschriftungen, zum Beispiel ein Text auf Deutsch, Englisch oder Französisch je nach Browsersprache. Außerdem lassen sich damit Ausweichinhalte bauen, etwa ein <foreignObject> mit HTML und daneben ein reiner SVG-Text für Umgebungen, die das nicht unterstützen. Ein Kind ohne Bedingungsattribute trifft immer zu und eignet sich deshalb als letzter Standardfall.

Die Schnittstelle bringt keine eigenen Eigenschaften oder Methoden mit. Sie erbt alles von SVGGraphicsElement, etwa getBBox(), getCTM() und transform. Über SVGElement und Element kommen außerdem die üblichen DOM-Methoden hinzu. Welches Kind gerade gerendert wird, verrät die Schnittstelle nicht direkt. Das muss man selbst ermitteln, zum Beispiel über die Größe der Bounding-Box oder über getClientRects().

Rückgabewert

Typ

SVGSwitchElement

Beschreibung

Man erhält eine Instanz über document.createElementNS("http://www.w3.org/2000/svg", "switch") oder über DOM-Abfragen wie querySelector("switch"). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Sprachabhängige Beschriftung per Skript erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 200 50');

const sw = document.createElementNS(SVG_NS, 'switch');

const texte = [
  { lang: 'de', inhalt: 'Hallo Welt' },
  { lang: 'fr', inhalt: 'Bonjour le monde' },
  { lang: null, inhalt: 'Hello world' } // Standardfall ohne Bedingung
];

for (const { lang, inhalt } of texte) {
  const t = document.createElementNS(SVG_NS, 'text');
  t.setAttribute('x', '10');
  t.setAttribute('y', '30');
  if (lang) t.setAttribute('systemLanguage', lang);
  t.textContent = inhalt;
  sw.append(t);
}

svg.append(sw);
document.body.append(svg);

console.log(sw instanceof SVGSwitchElement);
console.log(sw instanceof SVGGraphicsElement);

true true

Ermitteln, welches Kind gerade gerendert wird

// Vorausgesetzt wird ein <switch id="gruss"> im Dokument
const sw = document.querySelector('#gruss');

const aktiv = [...sw.children].find(
  (kind) => kind.getClientRects().length > 0
);

console.log(aktiv?.getAttribute('systemLanguage') ?? 'Standardfall');
console.log(sw.getBBox().width > 0);

de true

Ausweichinhalt für foreignObject

const markup = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60">
  <switch id="fallback">
    <foreignObject width="300" height="60"
      requiredExtensions="http://www.w3.org/1999/xhtml">
      <p xmlns="http://www.w3.org/1999/xhtml">HTML-Absatz im SVG</p>
    </foreignObject>
    <text x="10" y="35">Nur-SVG-Ausweichtext</text>
  </switch>
</svg>`;

document.body.insertAdjacentHTML('beforeend', markup);
const sw = document.getElementById('fallback');
console.log(sw.constructor.name, sw.childElementCount);

SVGSwitchElement 2

// Wichtig · Fallstricke

Nur direkte Kinder zählen: <switch> wertet ausschließlich seine direkten Kindelemente aus. Verschachtelte Bedingungen innerhalb eines <g> spielen für die Auswahl keine Rolle.
Reihenfolge ist entscheidend: Das erste passende Kind gewinnt. Setze den Standardfall ohne Bedingungsattribute deshalb immer ans Ende, sonst werden die spezifischeren Varianten nie angezeigt.
Nicht gerenderte Kinder bleiben im DOM. Sie sind per Skript erreichbar und werden von querySelector gefunden. Die Auswahl findet nur beim Rendern statt.
Auf Änderungen verlassen: Werden systemLanguage oder die Kindelemente per Skript geändert, sollten moderne Browser die Auswahl neu auswerten. Ältere Engines taten das teilweise nicht zuverlässig, deshalb sollte man solche Fälle testen.
requiredFeatures ist veraltet: Das Attribut wurde in SVG 2 entfernt und gilt in aktuellen Browsern stets als erfüllt. Für neuen Code taugt es nicht.
Browserunterstützung: Die Schnittstelle wird von allen modernen Browsern unterstützt. Wie systemLanguage abgeglichen wird, etwa de gegen de-DE, kann sich zwischen den Engines leicht unterscheiden.

Siehe auch

SVGMPathElement SVGPathElement SVGSetElement SVGStopElement SVGTitleElement