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
- Attributs de traitement conditionnel
- Attributs de base
- Attributs d'événements graphiques
- Attributs de présentation
classstyleexternalResourcesRequiredtransform
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
| Spécification | Statut | Commentaire |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 La définition de '<switch>' dans cette spécification. |
Candidat au statut de recommandation | Clarifie l'évaluation de l'attribut systemLanguage |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<switch>' dans cette spécification. |
Recommendation | Définition initiale |
Compatibilité des navigateurs
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
switch | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 4 | IE Support complet 9 | Opera Support complet 8 | Safari Support complet 3.1 | WebView Android Support complet 3 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android ? | Safari iOS Support complet 3.1 | Samsung Internet Android Support complet 1.0 |
allowReorder | Chrome ? | Edge ? | Firefox Aucun support ? — 50 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android Aucun support ? — 50 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
- Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.