<switch>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<switch> SVG 元素按順序評估其直接子元素上的所有 requiredFeatures、requiredExtensions 和 systemLanguage 屬性，然後渲染這些屬性計算為 true 的第一個子元素。

其他直接子元素將被跳過，因此不會被渲染。如果子元素是容器元素（如 <g>），則其子樹也會被處理/渲染或被跳過/不渲染。

注意： display 和 visibility 屬性對 <switch> 元素處理沒有影響。特別是，將子元素的 display:none 設定為 true/false 測試對 <switch> 處理沒有影響。

使用語境

分類	容器元素
允許內容	可包含任意數量、任意順序的下列元素動畫元素描述性元素形狀元素 `<a>`、`<foreignObject>`、`<g>`、`<image>`、`<svg>`、`<switch>`、`<text>`、`<use>`

屬性

此元素僅包含全域性屬性。

DOM 介面

此元素實現 SVGSwitchElement 介面。

SVG <switch> 示例

此示例演示了根據瀏覽器的語言設定顯示不同文字內容。switch 元素將顯示其第一個 systemLanguage 屬性與使用者語言匹配的子元素，或者在沒有 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>

結果

規範

規範
Scalable Vector Graphics (SVG) 2 # SwitchElement

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年6月6日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤