Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 297

Visitas el mes pasado: 432

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


tutorial SVG
W3Scools
Using SVG with HTML5 tutorial
Alejandro Castillo Cantón
Agregar SVG a una página web
msdn.microsoft.com
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
W3C Recommendation 16 August 2011
Introducción a SVG
http://sabia.tic.udc.es

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




SVG (IV)

Texto en SVG

imagen html5

Insertar texto

Para insertar texto dentro de un gráfico de SVG utilizamos la etiqueta text. Esta etiqueta tiene su correspondiente etiqueta de cierre, y entre la etiqueta de apertura y la de cierre incluimos el texto que queremos poner.

<text>mi texto </text>

Esta es la sintaxis básica de esta etiqueta, sin embargo para que funcione bien debemos poner algunos atributos que indiquen en qué lugar del contenedor queremos poner el texto. Estos son los atributos x e y que indican las coordenadas "x" e "y" respectivamente del lugar en donde queremos poner el texto.

<text x=50 y=70 >Mi texto</text>

Esto es suficiente para visualizar un texto en la mayoría de los navegadores. Estos nos dan el estilo por defecto del texto. Para insertar el texto a partir del punto dado éste traza una línea horizontal y el texto se coloca encima de la misma.

Primer texto de prueba Segundo texto de prueba

Para desplazar el texto respecto de esta línea en la que se coloca podemos añadir los atributos dx y dy que indican el desplazamiento horizontal y vertical respectivamente respecto a la línea que marca su posición original.

En el contenedor de la derecha hemos puesto dos textos y también dos líneas horizontales que empiezan en las mismas coordenadas "x" e "y" que los textos. El primer texto lo hemos dejado en sus coordenadas originales, y el segundo lo hemos desplazado mediante los atributos dx y dy. el código que hemos empleado es el siguiente:

<svg width=300 height=150>
<text x=50 y=50>Primer texto de prueba</text>
<text x=50 y=120 dx=20 dy=20>Segundo texto de prueba</text>
<line x1=50 y1=50 x2=250 y2=50 stroke="black" stroke-width=1 />
<line x1=50 y1=120 x2=250 y2=120 stroke="black" stroke-width=1 />
</svg>


Estilo de texto

Para dar un estilo al texto emplearemos diferentes atributos:

Primer texto svg Segundo texto svg rotación de texto uno dos tres cuatro uno dos tres cuatro uno dos tres cuatro

Además de estos atributos podemos poner también los atributos de estilo CSS style=" ... ", de clase class="nombre_clase" y de identidad id= "nombre_id" que funcionan igual que con el resto de elementos de HTML.

Hemos puesto aquí un ejemplo de un contenedor SVG en el que empleamos los atributos vistos anteriormente para texto. En los dos primeros empleamos los atributos de estilo para la fuente. En el tercero ponemos el atributo para rotación del texto. En los tres últimos comparamos los atributos para ajustar la longitud del texto y el espaciado entre letras.

El código fuente de este ejemplo es el siguiente:

<svg width=300 height=200 >
<text x=20 y=30 font-weight="bold" fill="aqua" stroke="blue" stroke-width=2 
      font-family="comic sans ms" font-size="2em" >
      Primer texto svg</text>
<text x=20 y=60 fill="green" font-family="arial" font-style="italic" 
      font-variant="small-caps" font-size="1.5em">     
      Segundo texto svg</text>
<text x=20 y=100 fill="red" textLength=260 rotate="10 20 30 40 50 40 30 20 10 0 -10 -20 -30">
     rotación de texto</text>			
<text x=20 y=130 fill="blue" textLength=260 lengthAdjust='spacingAndGlyphs' >
     uno dos tres cuatro</text>
<text x=20 y=160 fill="blue" textLength=260 lengthAdjust='spacing' >
     uno dos tres cuatro</text>		 
<text x=20 y=190 fill="blue" letter-spacing="5px" text-decoration="underline"  >
     uno dos tres cuatro</text>	 	 
</svg>


Estilo CSS en SVG

Gran parte de los atributos anteriores pueden ser sustituidos por propiedades CSS aplicadas al elemento de texto. Como con cualquier código CSS podemos ponerlo en el propio elemento con la etiqueta style o en una hoja de estilos aparte.

Los atributos relativos a la fuente (font-family, font-size, font-weight, font-style y font-variant) pueden sustituirse por sus correspondientes propiedades en CSS. También podemos usar la propiedad de tipo "shorthand" font que sustituye a todas ellas.

Los atributos text-decoration y letter-spacing también pueden sustituírse por sus correspondientes propiedades CSS.

Primer texto svg Segundo texto svg

Los atributos fill, stroke y stroke-width tienen también sus correspondientes propiedades CSS con el mismo nombre, por ejemplo:

text {fill: aqua; stroke: navy; stroke-width: 1px; }

Estas propiedades CSS pueden usarse también con otros elementos como figuras y rutas.

Los demás atributos no tienen correspondencia en CSS, y deben ponerse en el elemento correspondiente.

Siempre que se pueda es preferible utilizar las propiedades CSS en lugar de los atributos, ya que en caso de páginas con bastantes elementos, los atributos puede que no funcionen correctamente a causa de la herencia de los elementos padre en CSS.

El ejemplo que hemos puesto aquí simplifica bastante el código de los dos primeros textos del ejemplo anterior. Este es su código:

<svg width=300 height=120>
<text x=20 y=30
      style="font: bold 2em 'comic sans ms';fill: aqua; stroke: blue; stroke-width: 2px;">
      Primer texto svg</text>
<text x=20 y=100
      style="font: italic small-caps 1.5em arial; fill: green;">     
      Segundo texto svg</text>
</svg>

Al igual que con los demás elementos de HTML podemos usar también los atributos class o id para referirnos a uno o varios elementos en la hoja de estilos.


Agrupar elementos

Primer titulo svg Segundo titulo svg Sección primera de svg Sección segunda de svg

Supongamos que tenemos un contenedor con varios elementos, y queremos dar a todos ellos, o a una parte de ellos, el mismo estilo. Hay en todos ellos varios atributos que se repiten. Para evitar esto podemos poner una serie de etiquetas que son elementos contenedores, en las cuales podemos incluir estos atributos.

Utilizamos para ello la etiqueta <g> ... </g> por ejemplo si queremos poner dos textos con el mismo estilo podemos incluir el estilo en la etiqueta g que engloba las dos etiquetas de texto

El contenedor SVG de la derecha tiene dos tipos de texto diferente. Hemos utilizado la etiqueta g par agrupar los elementos con igual estilo. El código es el siguiente:

<svg width=320 height=200>
<g style="font: bolder 1.7em arial;fill: yellow; stroke: red; stroke-width: 1px;">
<text x=20 y=40>Primer titulo svg</text>
<text x=20 y=140>Segundo titulo svg</text>
</g>
<g style="font: italic 1.2em verdana;fill: purple;">
<text x=20 y=80>Sección primera de svg</text>
<text x=20 y=180>Sección segunda de svg</text>
</g>
</svg>

Otras etiquetas de texto


La etiqueta tspan
texto en rojo destacado.

Esta etiqueta se incluye dentro de la etiqueta text para poner un estilo diferente a una parte del texto. Es como la etiqueta span de HTML pero dentro de un texto en SVG.

Vemos aquí a la derecha un ejemplo de utilización de esta etiqueta. Su código es el siguiente:

<svg width=300 height=100>
<text x=20 y=60 style="font: normal 1em arial; fill: navy;">
   texto en 
     <tspan style="font: bold 1.2em 'courier new'; fill: red;">rojo</tspan>
   destacado.
</text>
</svg>

incluir enlaces

Podemos incluir enlaces en los elementos de un contenedor SVG.

Usaremos para ello la misma etiqueta <a> que en HTML, pero con algunas modificaciones.

La ruta del enlace la pondremos dentro del atributo xlink:href. Aunque en realidad podríamos usar el atributo href, con xlink:href evitamos que el enlace tenga el estilo por defecto de los enlaces (color azul, subrayado, etc.).

Círculo: ir a Google ... Rectángulo: ir a yahoo Enlace a Wikipedia

Dentro del enlace podemos poner uno o varios elementos de SVG o podemos ponerlo dentro de una etiqueta de texto.

Los enlaces, tal como ocurre en HTML, no heredan algunas de las características de su elemento contenedor (sobre todo cuando éste es un texto), por lo que deberemos indicar éstas en el enlace.

Por lo demás admiten también los mismos atributos que el resto de enlaces, y también las pseudo-clases CSS.

Hemos hecho aquí un ejemplo en el que vemos cómo tanto figuras como texto pueden incluir enlaces. Para poder poner poner pseudo-clases hemos incluído también algo de código CSS en la hoja de estilos. Este es el código HTML-SVG:

<svg width=300 height=200>
<a xlink:href="http://www.google.es" target="_blank">
<circle cx=60 cy=60 r=50 class="c1"/>
</a>
<a xlink:href="http://yahoo.es" target="_blank" >
<rect x=160 y=20 width=130 height=80 class="r1"/>
</a>
<text x=10 y=130 style="font: normal 0.8em 'comic sans ms';" >
   Círculo: ir a Google ... Rectángulo: ir a yahoo</text>
<text x=30 y=190 style="fill: purple; font: italic bold 1.5em 'times new roman';">
   Enlace a <a xlink:href="http://es.wikipedia.org/" target="_blank" title="Wikipedia" 
   class="e1" style="font: italic bold 1em 'times new roman';">Wikipedia</a>
<text>
</svg>

Para completar el código hemos puesto unas líneas en la hoja de estilos CSS que se corresponden con los atributos de clase del código anterior:

.c1 { fill: yellow; stroke: blue; stroke-width: 2px; }
.c1:hover { fill: orange; }
.r1 { stroke: green; stroke-width: 2px; fill: aqua;}
.r1:hover { stroke: purple; stroke-width: 5px; }
.e1 { fill: red; }
.e1:hover {fill : green; }

Los enlaces en SVG pueden ser una opción para sustituir los mapas de imágenes con HTML.


Texto siguiendo una ruta

Podemos poner también el texto siguiendo la línea de una ruta o etiqueta path. para ello utilizamos la etiqueta textPath.

En primer lugar dibujaremos la ruta. Ésta tendrá también un atributo id par identificarla:

<path id="ruta1" d="M 20 200 Q 130 0 320 200 m 0 0 z" stroke="aqua" stroke-width=1 fill="white"/>

Este texto sigue una curva de Bézier TEXTO VERTICAL

En este caso dibujamos una curva de Bezier cuadrática sobre la cual irá el texto.

Después ponemos la etiqueta text dentro de la cual incluimos la etiqueta textPath.

En la etiqueta textPath incluimos la referencia al atributo id de la ruta con el atributo xlink:href. Por ejemplo si en la ruta hemos puesto <path id="ruta1"> en textPath podremos <textPath xlink:href="#ruta1">; es decir la misma referencia con el signo de almohadilla (#) delante.

Los atributos de estilo sobre el tipo de letra (fuente) es mejor ponerlos en la etiqueta textPath ya que no se heredan de la etiqueta text en la que está incluída.

Siguiendo con nuestro ejemplo, el código para incluir el texto será como el siguiente.

<text fill="blue" dy=-5>
<textPath xlink:href="#ruta1" style="font: bold 1em verdana" >
Este texto sigue una curva de Bézier</textPath>
</text>

Este ejemplo nos da la curva cuadrática de Bézier que aparece en el contenedor SVG que tenemos aquí. Además hemos añadido también un segundo texto siguiendo una ruta que nos crea un texto en vertical.

Para ello hemos dibujado una ruta que consiste en una línea vertical. El color de la línea es el mismo que el del fondo, para que no se vea. Hemos puesto un texto en la línea y lo hemos rotado para ver las letras en su posición correcta. El código del contenedor es el siguiente:

<svg width=330 height=250 style="border: 1px solid black;">
<path id="ruta1" d="M 20 200 Q 130 0 320 200  m 0 0 z"
      stroke="aqua" stroke-width=1 fill="white"/>
<text fill="blue" dy=-5>
<textPath xlink:href="#ruta1" style="font: bold 1em verdana" >
Este texto sigue una curva de Bézier</textPath>
</text>

<path id="ruta2" d="M 300 20 L 300 240 m 0 0 z" stroke="white" stroke-width=1 fill="white"/>
<text fill="red" style="font: bold 1em arial;" rotate=270 textLength=220 >
<textPath xlink:href="#ruta2" style="font: bold 1em 'courier new';" >TEXTO VERTICAL</textPath>
</text>
</svg>





En la siguiente página veremos más propiedades para el estilo de las figuras

Relleno de figuras



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com