<switch>

Aller à :
  1. Contexte d'utilisation
  2. Attributs
  3. Interface DOM
  4. Exemple
  5. Spécifications
  6. Compatibilité des navigateurs

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

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 4IE Support complet 9Opera Support complet 8Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS Support complet 3.1Samsung Internet Android ?
allowReorder
ObsolèteNon-standard
Chrome ? Edge ? Firefox Aucun support ? — 50IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Aucun support ? — 50Opera 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é.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, Sebastianz, SphinxKnight, J.DMB, loic
Dernière mise à jour par : a-mt,