<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.

<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 コンテンツ

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>

結果

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# SwitchElement

ブラウザーの互換性

BCD tables only load in the browser