<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 表格仅在浏览器中加载