El elemento switch
El elemento <switch>
en SVG funciona como un condicional, que nos permite intercambiar el contenido de este en función de si un atributo evalúa como verdadero ( true
) o falso ( false
).
Los atributos condicionales que pueden ser utilizados con <switch>
son:
Típicamente utilizamos el elemento <switch>
para mostrar diferentes imágenes, elementos de texto u otros elementos SVG en función del lenguaje escogido por el usuario. Para esto necesitamos utilizar el atributo systemLanguage
.
Cada idioma posee su código ISO 639-3 de identificación.
En el siguiente ejemplo queremos mostrar en pantalla la bandera española si lenguaje escogido por el usuario es el español ( un grupo de rectángulos ):
<switch>
<g systemLanguage="es">
<rect x ="0" y ="0" height ="11" width ="46" style ="fill: red"/>
<rect x ="0" y ="11" height ="11" width ="46" style ="fill: gold"/>
<rect x ="0" y ="22" height ="11" width ="46" style ="fill: red"/>
</g>
la bandera de Francia ( otro grupo de rectángulos ), para los francófonos.
<g systemLanguage="fr">
<rect x ="0" y ="0" height ="33" width ="46" style ="fill: red"/>
<rect x ="15" y ="0" height ="33" width ="46" style ="fill: white"/>
<rect x ="31" y ="0" height ="33" width ="46" style ="fill: blue"/>
</g>
la bandera americana ( una imagen ) para los anglófonos.
<g systemLanguage="en">
<image xmlns:xlink="USA.gif" height="33" width="46" x="0" y="0"></image>
</g>
Los demás verán en pantalla un mensaje ( texto ) que dice "NO FLAG" ( no hay bandera ).
<!-- El valor por defecto -->
<g>
<text x="23" y="16" dominant-baseline="central" text-anchor="middle">
NO FLAG
</text>
</g>
</switch>
Observe por favor que en este caso el grupo <g>
no lleva el atributo systemLanguage
y es el último elemento dentro de <switch>
. Si los demás grupos evalúan a falso ( el idioma escogido por el usuario no es ni el español, ni el ingles, ni el francés ) el SVG mostrará en pantalla este último grupo, el único que evalúa a verdadero. De lo contrario mostrará el objeto SVG del grupo cuyo idioma se corresponde con el lenguaje escogido por el usuario.
See the Pen SVG switch systemLanguage by Gabi (@enxaneta) on CodePen.
Artículos relacionados
- - Documentos estructurados
- - Agrupar y reutilizar
- - Símbolos
- - Elementos SVG anidados
- - Marcadores
- - El elemento image
- - Enlaces externos
- - El elemento switch
- - El elemento foreignObject
Enlaces útiles
- La esp. w3.org: Document Structure
- Optimize el código SVG con SVG Optimiser
- Más información acerca del soporte de SVG en los navegadores
- Libros en ingles:
- SVG Essentials
- SVG Colors, Patterns & Gradients