Banner

Ultima revisión 30/10/2012

Text: Insertar Texto dentro de un gráfico SVG

Otra de las necesidades que a veces nos encontramos al crear diseños web es la de insertar un texto de forma distinta. Todo lo que se puede realizar en SVG se puede hacer en CSS3 como cambiar la fuente, poner sombras o, incluso, transformar el texto a través de efectos como transform, rotate, skew, ...

Hoy vamos a aprender como crear texto dentro de un SVG.

Hay que decir que investigando me encontré con una página que crea textos animados en formato SVG. en Developer Mozilla la podéis encontrar y usar. Para extraer el esquema SVG sólo tenéis que inspeccionar el código fuente con Firebug o similar, copiarlo en el portapapeles y guardarlo como un archivo .svg.

Mola el SVG

Agregar texto a un documento SVG, es muy sencillo. De hecho, es muy similar a como se agrega texto en HTML, e inclusive, tiene más características.

La etiqueta text crea un elemento de texto, que puede ser ligado a un estilo.

  • font-family define la fuente.
  • font-size establecen tamaño de la fuente en px, em, ...
  • fill: Establece el color del texto que puede ser cualquier color admitido en HTML o CSS.
  • transform: Establece una transformación en el texto. Rotación, traslado, etc. Todo se explica en el artículo que trata las Transformaciones en gráficos vectoriales SVG.

La etiqueta tspan

Listado: · Elemento 1 · Elemento 2 · Elemento 3 · Elemento n

Dentro de un elemento de texto podemos agregar la etiqueta tspan que define una zona dentro del texto que puede tener un estilo diferente a la que se estableció en la etiqueta original de texto o puede establecer más elementos de texto, como líneas de un párrafo. Con ella podemos agregar negritas dentro del texto o inclusive texto con otras coordenadas dentro del elemento del texto.

El código es el siguiente:


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="10" y="20" style="fill:red;">Listado:
        <tspan x="10" y="45">· Elemento 1</tspan>
        <tspan x="10" y="70">· Elemento 2</tspan>
        <tspan x="10" y="95">· Elemento 3</tspan>
        <tspan x="10" y="120">· Elemento n</tspan>
    </text>
</svg> 

La etiqueta a. Insertar hipervínculos al texto

http://www islavisual .com

Otra cosa que podemos hacer es ponerle un vínculo al texto para que actúe como si fuese un típico enlace HTML. Esto se hace con la etiqueta a.

La etiqueta a tiene como opciones:

  • xlink:href define la dirección de enlace.
  • target establece si se abrirá en otra pestaña o venta o no. Es igual que en HTML.

El código es el siguiente:


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="http://www.islavisual.com/" target="_blank">
        <text x="0" y="35" font-size="32" font-family="Verdana" fill="#283a64">http://www</text>
        <text x="0" y="70" font-size="32" font-family="Verdana" fill="#000000">islavisual</text>
        <text x="0" y="105" font-size="32" font-family="Verdana" fill="#425b8e">.com</text>
    </a>
</svg> 

la etiqueta Path. Efectos con el texto

http://www.islavisual.com

El elemento path se utiliza para definir trayectorias y podéis ver como se usa accediendo al artículo de Definición de trayectorias en SVG.

Los comandos que están disponibles definir trayectorias son:

El código es el siguiente:


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="path1" d="M0,20 a3,2 0 0,0 200,0" />
    </defs>
    <text x="0" y="100" style="font-size:20px; fill:#425b8e;">
        <textPath xlink:href="#path1">http://www.islavisual.com</textPath>
    </text>
</svg>