switch

<switch>

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

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

用法上下文

分类容器元素
允许的内容动画元素描述元素图形元素<a>,<foreignObject>,<g>,<image>,<svg>,<switch>,<text>,<use>

属性

全局属性

  • 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>

结果

产品规格

SpecificationStatusComment
Scalable Vector Graphics (SVG) 2The definition of '<switch>' in that specification.Candidate RecommendationClarified the evaluation of the systemLanguage attribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<switch>' in that specification.RecommendationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0(Yes)1.819.08.03.0.4

FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0?(Yes)1.81No support?3.0.4