⇪

El elemento switch

facebook-svg gplus-svg twitter-svg

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.