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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。