<switch>
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <switch>-SVG-Element bewertet alle requiredExtensions- und systemLanguage-Attribute seiner direkten Kindelemente der Reihe nach und rendert dann das erste Kindelement, bei dem diese Attribute auf true ausgewertet werden.
Andere direkte Kindelemente werden übersprungen und daher nicht gerendert. Wenn ein Kindelement ein Container-Element ist, wie <g>, wird auch dessen Unterbaum verarbeitet/gerendert oder übersprungen/nicht gerendert.
Hinweis:
Die Eigenschaften display und visibility haben keinen Einfluss auf die Verarbeitung des <switch>-Elements. Insbesondere hat die Einstellung von display:none auf ein Kindelement keinen Einfluss auf die True/False-Auswertung für die <switch>-Verarbeitung.
Verwendungskontext
| Kategorien | Container-Element |
|---|---|
| Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente <a>, <foreignObject>, <g>, <image>, <svg>, <switch>, <text>, <use> |
Attribute
requiredExtensions-
Eine durch Leerzeichen getrennte Liste von URL-Werten, die auf die Sprach-Erweiterungen verweisen, die der Benutzeragent unterstützen muss, damit das Element gerendert wird.
systemLanguage-
Eine durch Kommas getrennte Liste unterstützter Sprachtags.
DOM-Schnittstelle
Dieses Element implementiert die SVGSwitchElement-Schnittstelle.
Beispiele
Dieses Beispiel zeigt, wie je nach Spracheinstellung des Browsers unterschiedliche Textinhalte angezeigt werden können. Das <switch>-Element zeigt das erste seiner Kindelemente an, dessen systemLanguage-Attribut mit der Sprache des Benutzers übereinstimmt, oder das Fallback-Element ohne systemLanguage-Attribut, wenn keines von ihnen übereinstimmt.
<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 requiredExtensions="http://example.org/lang/ext/emoji">☺</text>
</switch>
</svg>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # SwitchElement |