<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> の定義		 勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser