<switch>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<switch> は SVG の要素で、その直接の子要素の requiredFeatures, requiredExtensions, systemLanguage 属性を順に評価し、これらの属性が true と評価された最初の子要素を描画します。
他の直接の子要素はバイパスされ、描画されません。子要素が <g> のようなコンテナー要素であった場合、そのサブツリーも処理されたり描画されたりするか、バイパスされたり描画されなかったりします。
メモ: display および visibility プロパティは、 <switch> 要素の処理には何の影響もありません。特に、子に display:none を設定しても、 <switch> 処理の真偽テストには影響しません。
使用コンテキスト
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 |