<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 die Attribute requiredFeatures, requiredExtensions und systemLanguage seiner direkten Kindelemente in der Reihenfolge und rendert dann das erste Kind, bei dem diese Attribute auf wahr auswerten.
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 das Setzen von display:none bei einem Kindelement keinen Einfluss auf den Wahr/Falsch-Test während der <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 Sprach-Erweiterungen referenzieren, die der Benutzeragent unterstützen muss, damit das Element gerendert wird.
systemLanguage-
Eine durch Komma getrennte Liste von unterstützten Sprachtags.
DOM-Schnittstelle
Dieses Element implementiert die SVGSwitchElement Schnittstelle.
Beispiele
Dieses Beispiel zeigt, wie verschiedene Textinhalte abhängig von den Spracheinstellungen des Browsers angezeigt werden. Das <switch> Element wird das erste seiner Kindelemente anzeigen, dessen systemLanguage Attribut mit der Sprache des Benutzers übereinstimmt, oder das Fallback-Element ohne systemLanguage Attribut, falls keines ü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 |