<switch>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <switch> SVG Element evaluiert die Attribute requiredFeatures, requiredExtensions und systemLanguage seiner direkten Kindelemente in der Reihenfolge und rendert das erste Kindelement, bei dem diese Attribute als wahr bewertet werden.

Andere direkte Kinder werden umgangen und daher nicht gerendert. Wenn ein Kindelement ein Container-Element ist, wie <g>, wird dessen Unterbaum ebenfalls verarbeitet/gerendert oder umgangen/nicht gerendert.

Hinweis: Die Eigenschaften display und visibility haben keinen Einfluss auf die Verarbeitung des <switch> Elements. Insbesondere hat das Setzen von display:none auf ein Kindelement keinen Einfluss auf die Wahrheitsprüfung für die <switch>-Verarbeitung.

Nutzungskontext

Kategorien	Container-Element
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente `<a>`, `<foreignObject>`, `<g>`, `<image>`, `<svg>`, `<switch>`, `<text>`, `<use>`

DOM-Schnittstelle

Dieses Element implementiert die SVGSwitchElement Schnittstelle.

SVG-`<switch>`-Beispiel

Dieses Beispiel zeigt, wie je nach Spracheinstellung des Browsers unterschiedlicher Textinhalt angezeigt wird. Das switch-Element zeigt das erste seiner Kindelemente an, dessen systemLanguage-Attribut mit der Sprache des Nutzers übereinstimmt, oder das Fallback-Element ohne systemLanguage-Attribut, falls keine Übereinstimmung vorliegt.

HTML

html

<svg viewBox="0 -20 100 50">
  <switch>
    <text systemLanguage="ar">مرحبا</text>
    <text systemLanguage="de,nl">Hallo!</text>
    <text systemLanguage="en-us">Howdy!</text>
    <text systemLanguage="en-gb">Wotcha!</text>
    <text systemLanguage="en-au">G'day!</text>
    <text systemLanguage="en">Hello!</text>
    <text systemLanguage="es">Hola!</text>
    <text systemLanguage="fr">Bonjour!</text>
    <text systemLanguage="ja">こんにちは</text>
    <text systemLanguage="ru">Привет!</text>
    <text>☺</text>
  </switch>
</svg>

Ergebnis

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # SwitchElement

Browser-Kompatibilität

BCD tables only load in the browser