switch

该<switch>SVG元素评估requiredFeatures，requiredExtensions并systemLanguage以它的直接子元素属性，然后再处理和渲染的这些属性的评估为true的第一个孩子。所有其他人将被绕过，因此不会呈现。如果子元素是像a这样的容器元素<g>，则整个子树将被处理/呈现或绕过/不呈现。

请注意, display 属性和 visibility 的值对switch元素没有影响。特别是, 在switch 元素的子项上设置 "display为 none" 对与swicth元素处理相关的真／假测试没有影响。

用法上下文

属性

全局属性

• Conditional processing attributes

• Core attributes

• Graphical event attributes

• Presentation attributes

• class

• style

• externalResourcesRequired

• transform

DOM接口

这个元素实现了SVGSwitchElement接口。

SVG <switch>例子

本示例演示如何根据浏览器的语言设置显示不同的文本内容。switch 元素将显示其 systemLanguage 属性与用户的语言匹配的第一个子元素, 或者, 如果没有匹配的元素没有 systemLanguage 属性, 则它将在其中没有匹配项。

HTML内容

<svg width="100%" viewBox="0 -20 100 50">
   <switch>
      <text systemLanguage="ar">مرحبا</text>
      <text systemLanguage="de,nl">Hallo!</text>
      <text systemLanguage="en">Hello!</text>
      <text systemLanguage="en-us">Howdy!</text>
      <text systemLanguage="en-gb">Wotcha!</text>
      <text systemLanguage="en-au">G'day!</text>
      <text systemLanguage="es">Hola!</text>
      <text systemLanguage="fr">Bonjour!</text>
      <text systemLanguage="ja">こんにちは</text>
      <text>☺</text>
   </switch>
</svg>

结果

产品规格

浏览器兼容性