<switch>简介

<switch>的典型用法是用于显示不同的文字，但不可以用它来显示不同的图形。

MDN开发文档 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch

The <switch> SVG element evaluates the requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered. If the child element is a container element such as a <g>, then the entire subtree is either processed/rendered or bypassed/not rendered.

Note that the values of properties display and visibility have no effect on switch element processing. In particular, setting display to none on a child of a switch element has no effect on true/false testing associated with switch element processing.

SVG的元素 <switch> 标签，会对它的直接子元素上的属性requiredFeatures， requiredExtensions 和 systemLanguage 按顺序地进行求值，直到结果为真。所有其它的元素都会被绕开，因此它们不会被表达。如果子元素是一个容器元素，比如<g>，整个子树要么被处理和表达，幺妹就会被绕过并且不表达。

注意，display 和 visibility 属性并不会影响分支元素的执行。特别的，在分支的子元素上设置disply为none，对处理相关联的真/假测试没有任何影响。

例子

This example demonstrates showing different text content depending on the browser’s language settings. The switch element will display the first of its child elements whose systemLanguage attribute matches the user’s language, or the element with no systemLanguage attribute if none of them matches.

下面的例子论证了根据浏览器的语音设置来显示不同的文本内容。switch分支将会显示它的子元素中第一个系统语言属性符合用户语言的元素，或者如果没有元素符合，那么将会显示没有系统语言属性的分支。

例一：某一分支符合

<svg xmlns="http://www.w3.org/2000/svg">
    <switch>
        <g systemLanguage="en-UK">
            <text x="10" y="20">UK English</text>
        </g>
        <g systemLanguage="en">
            <text x="10" y="20">English</text>
        </g>
        <g systemLanguage="es">
            <text x="10" y="20">Spanish</text>
        </g>
        <g systemLanguage="zh">
            <text x="10" y="20">中文</text>
        </g>
        <g>
            <text x="10" y="20">Default</text>
        </g>
    </switch> 
</svg>     
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

Result：
中文

例二：所有分支均不符合

<svg xmlns="http://www.w3.org/2000/svg" >
   <switch>
      <text x="10" y="20" systemLanguage="ar">مرحبا</text>
      <text x="10" y="20" systemLanguage="de,nl">Hallo!</text>
      <text x="10" y="20" systemLanguage="en">Hello!</text>
      <text x="10" y="20" systemLanguage="en-us">Howdy!</text>
      <text x="10" y="20" systemLanguage="en-gb">Wotcha!</text>
      <text x="10" y="20" systemLanguage="en-au">G'day!</text>
      <text x="10" y="20" systemLanguage="es">Hola!</text>
      <text x="10" y="20" systemLanguage="fr">Bonjour!</text>
      <text x="10" y="20" systemLanguage="ja">こんにちは</text>
      <text x="10" y="20">☺</text>
   </switch>
</svg>
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

Result：
☺

文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/chy555chy/article/details/53364684