<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
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
switchChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 8Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0
allowReorder
非推奨非標準
Chrome ? Edge ? Firefox 未対応 ? — 50IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 ? — 50Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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