SVG 分支（switch）

简介

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

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

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

注意，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分支将会显示它的子元素中第一个系统语言属性符合用户语言的元素，或者如果没有元素符合，那么将会显示没有系统语言属性的分支。

例一：某一分支符合

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Result：

中文

例二：所有分支均不符合

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Result：

☺

SVG

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。