<switch>

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна в браузерах с ⁨июля 2015⁩ года.

Элемент <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

<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>

Результат

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # SwitchElement>

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`switch`	1	12	4	8	3.1	18	4	10.1	2	1.0	3	2
`systemLanguage`	1	12	12	≤12.1	3.1	18	14	≤12.1	2	1.0	3	2

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