<switch>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

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.

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 requiredExtensions="http://example.org/lang/ext/emoji">☺</text>
  </switch>
</svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # SwitchElement

Browser-Kompatibilität

Siehe auch

requiredFeatures

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden