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>结果
产品规格
Specification | Status | Comment |
|---|---|---|
Scalable Vector Graphics (SVG) 2The definition of '<switch>' in that specification. | Candidate Recommendation | Clarified the evaluation of the systemLanguage attribute |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<switch>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.81 | 9.0 | 8.0 | 3.0.4 |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | 3.0 | ? | (Yes) | 1.81 | No support | ? | 3.0.4 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
