<switch>

**<switch>** SVG 元素按順序評估其直接子元素上的任何 requiredFeatures、requiredExtensions 和 systemLanguage 屬性，然後呈現這些屬性評估為真的第一個子元素。

其他直接子元素將被跳過，因此不會被呈現。如果子元素是容器元素，如 <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>

結果

規範

規範
可縮放向量圖形 (SVG) 2 # SwitchElement

瀏覽器相容性

BCD 表格僅在瀏覽器中載入