<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.
L'élément switch
évalue les attributs requiredFeatures
, requiredExtensions
et systemLanguage
de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient true
. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que <g>
, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu.
Notez que la valeur des propriétés display
et visibility
n'ont aucun effet sur le traitement du switch
. En particulier, appliquer une propriété display
à none
sur l'élément enfant d'un switch
n'a aucun effet sur le résultat du test true/false
associé au traitement des éléments par le switch
.
Contexte d'utilisation
Catégories | Élément conteneur |
---|---|
Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre : Éléments d'animation Éléments descriptifs Éléments de formes <a> , <foreignObject> , <g> , <image> , <svg> , <switch> , <text> , <use> |
Attributs
Attributs globaux
Interface DOM
Cet élément implémente l'interface SVGSwitchElement
.
Exemple
Cet exemple montre comment afficher un texte différent selon les paramètres de langue du navigateur. L'élément switch
affichera le premier élément enfant dont l'attribut systemLanguage
correspond au language de l'utilisateur, ou l'élément sans attribut systemLanguage
si aucun ne correspond.
HTML
<svg width="100%" viewBox="0 -20 100 50">
<switch>
<text systemLanguage="ar">مرحبا</text>
<text systemLanguage="de,nl">Hallo!</text>
<text systemLanguage="en">Hello!</text>
<text systemLanguage="en-us">Howdy!</text>
<text systemLanguage="en-gb">Wotcha!</text>
<text systemLanguage="en-au">G'day!</text>
<text systemLanguage="es">Hola!</text>
<text systemLanguage="fr">Bonjour!</text>
<text systemLanguage="ja">こんにちは</text>
<text systemLanguage="ru">Привет!</text>
<text>☺</text>
</switch>
</svg>
Résultat
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # SwitchElement |
Compatibilité des navigateurs
BCD tables only load in the browser