<switch>

<switch> は SVG の要素で、その直接の子要素の requiredFeatures, requiredExtensions, systemLanguage 属性を順に評価し、これらの属性が true と評価された最初の子要素を描画します。他の直接の子要素はバイパスされ、描画されません。子要素が <g> のようなコンテナー要素であった場合、そのサブツリーも処理されたり描画されたりするか、バイパスされたり描画されなかったりします。

display および visibility プロパティは、 <switch> 要素の処理には何の影響もありません。特に、子に display:none を設定しても、 <switch> 処理の真偽テストには影響しません。

使用コンテキスト

カテゴリー	コンテナー要素
許可された内容	任意の数、任意の順で以下の要素を配置可能：アニメーション要素説明的要素図形要素 `<a>` 、 `<foreignObject>` 、 `<g>` 、 `<image>` 、 `<svg>` 、 `<switch>` 、 `<text>` 、 `<use>`

属性

グローバル属性

DOM インターフェイス

この要素は SVGSwitchElement インターフェイスを実装しています。

SVG <switch> の例

この例は、ブラウザーの言語設定に応じて異なるテキストコンテンツを表示する方法を示しています。 switch 要素は、 systemLanguage 属性がユーザーの言語に一致する子要素の最初のものを表示し、どれも一致しない場合は、 systemLanguage 属性を持たないフォールバック要素を表示します。

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>☺</text>
   </switch>
</svg>

結果

仕様書

仕様書	状態	備考
Scalable Vector Graphics (SVG) 2 <switch> の定義	勧告候補	`systemLanguage` 属性の評価を明確にしました。
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <switch> の定義	勧告	初回定義

ブラウザーの互換性

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`switch`	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 4	IE 完全対応 9	Opera 完全対応 8	Safari 完全対応 3.1	WebView Android 完全対応 3	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android ?	Safari iOS 完全対応 3.1	Samsung Internet Android 完全対応 1.0
`allowReorder` 非推奨非標準	Chrome ?	Edge ?	Firefox 未対応 ? — 50	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android 未対応 ? — 50	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

凡例

完全対応: 完全対応
未対応: 未対応
実装状況不明: 実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。: 非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。: 非推奨。新しいウェブサイトでは使用しないでください。

最終更新日: May 22, 2020, MDN 貢献者