SVG <switch> Element
Last Updated :
16 Jun, 2022
The <switch> SVG element is used to evaluate attributes on its direct child elements in order and then renders the first child where these attributes evaluate to true. Other remaining children will not be rendered.
Syntax:
<switch attribute="" >
<child 1>
<child 2>
<child 3>
<child n>
</switch>
Attributes:
- Global Attributes: some global attributes used like core attributes and styling attributes, etc.
Example: Getting System Language using <switch> element.
html
<!DOCTYPE html>
< html >
< body >
< svg viewBox="0 -20 100 50">
< switch >
< text systemLanguage="en-us">
US English
</ text >
< text systemLanguage="en-au">
Australian English
</ text >
< text systemLanguage="en">
Global English
</ text >
< text systemLanguage="es">
Spanish | Espanol
</ text >
</ switch >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers: The following browsers are supported by this SVG element:
- Chrome 1 and above
- Edge 12 and above
- Firefox 4 and above
- Safari 3.1 and above
- Internet Explorer 9 and above
- Opera 8 and above
Share your thoughts in the comments
Please Login to comment...