<switch>

Элемент <switch> SVG последовательно оценивает атрибуты requiredFeatures, requiredExtensions и systemLanguage у своих непосредственных дочерних элементов и затем отображает первый дочерний элемент, для которого эти атрибуты принимают значение true.

Другие непосредственные дочерние элементы будут проигнорированы и, следовательно, не будут отображены. Если дочерний элемент является контейнерным элементом, таким как <g>, то его поддерево также обрабатывается/отображается или игнорируется/не отображается.

Примечание: Свойства display и visibility не влияют на обработку элементов <switch>. В частности, установка display:none у дочернего элемента не влияет на проверку true/false для обработки элементов <switch>.

Контекст использования

Категории	Контейнерный элемент
Разрешенное содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы Элементы фигур `<a>`, `<foreignObject>`, `<g>`, `<image>`, `<svg>`, `<switch>`, `<text>`, `<use>`

Интерфейс DOM

Этот элемент реализует интерфейс SVGSwitchElement.

Пример SVG <switch>

Этот пример демонстрирует отображение различного текстового содержимого в зависимости от языковых настроек браузера. Элемент switch отобразит первый из своих дочерних элементов, чьё атрибут systemLanguage соответствует языку пользователя, или элемент по умолчанию без атрибута systemLanguage, если ни один из них не соответствует.

HTML

html

<svg viewBox="0 -20 100 50">
  <switch>
    <text systemLanguage="ar">مرحبا</text>
    <text systemLanguage="de,nl">Hallo!</text>
    <text systemLanguage="en-us">Howdy!</text>
    <text systemLanguage="en-gb">Wotcha!</text>
    <text systemLanguage="en-au">G'day!</text>
    <text systemLanguage="en">Hello!</text>
    <text systemLanguage="es">Hola!</text>
    <text systemLanguage="fr">Bonjour!</text>
    <text systemLanguage="ja">こんにちは</text>
    <text systemLanguage="ru">Привет!</text>
    <text>☺</text>
  </switch>
</svg>

Результат

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # SwitchElement

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`switch`	1	12	4	8	3.1	18	4	10.1	2	1.0	3
`systemLanguage`	1	12	12	≤12.1	3.1	18	14	≤12.1	2	1.0	3

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch