Unidad 16. Introducción a SVG. Gráficos redimensionables (XIII)

16.6. Texto en SVG

El texto en SVG admite varios parámetros para diseñarlo según nuestras necesidades, como el tamaño, color, fuente, etc. Veamos un primer texto básico. A continuación veremos más propiedades

Texto. text x y font-size font-family Dibuja un texto desde la posición (x,y) con las características de estilo especificadas (tamaño de fuente, familia de fuentes). Las propiedades de colores y relleno que ya conocemos también se aplican para el texto (fill="red" stroke="red" stroke-width="2") .

Ejemplo:

<text x="30" y="60" font-size="50" font-family="Chakra Petch',verdana,arial" fill="red" stroke="red" stroke-width="2" >Cursos aulaClic</text>

Si no encuentra una fuente especificada en la propiedad font-family se usará la siguiente fuente, en este caso no encuentra la fuente Chakra Petch y usa la fuente verdana. Para que encuentre la fuente debemos añadir el enlace a la fuente web correspondiente: <link href='https://fonts.googleapis.com/css?family=Chakra+Petch' rel='stylesheet' type='text/css'>

tspan. Si queremos cambiar algunas propiedades a una parte del texto podemos delimitar ese texto mediante <tspan> y </tspan> y aplicarle las propiedades que deseemos.

En el siguiente texto hemos aplicado diferentes propiedades a las letras "aula":

<text x="30" y="60" fill="red" font-size="50" font-family="Chakra Petch',verdana,arial" stroke="red" stroke-width="2" >
Cursos <tspan font-family="times" fill="black" stroke="black" >aula</tspan>Clic</text>

textPath. El elemento textPath permite definir un trazado al que se ajustará el texto. Mediante el elemento <defs> definimos un trazado estándar usando el elemento <path id="id1">, luego asignamos ese trazado al elemento textPath con la propiedad xlink:href="#id1".

En el siguiente ejemplo hemos definido un arco elíptico como trazado:

<defs>
 <path id="prueba" d="M20,200 a45,25 0 0,1 550,5" />
</defs>
<text x="10" y="40" fill="black" font-size="36" font-family="verdana">
 <textPath xlink:href="#prueba">aulaClic cursos gratis de informática </textPath>
</text>

defs. Permite escribir código que no se ejecuta en ese momento, sino posteriormente en otros elementos. Se identifica mediante un id="idx". Se suele usar para definir paths, gradientes, etc.

 Cursos Informática Gratuitos