XperimentoS

El texto que debe ser visualizado como parte de un fragmento de documento SVG es especificado usando el elemento “text”. Los caracteres son expresados como datos de caracteres en XML dentro del elemento “text”.

Los elementos “text” son visualizados como otros gráficos. Por consiguiente, el las transformaciones del sistemas de coordenadas, los recortes (clipping) y las de funcionalidades de mascaras son aplicadas a los elementos “text” de la misma forma que a las diferentes formas y paths.

Cada elemento “text” produce una simple cadena de texto que será visualizada. SVG no permite una forma automática de saltos de línea o wrapping. Para ello, hay que recurrir a diversos métodos como por ejemplo, poner cada una de las líneas en un elemento “text” diferente.

El elemento “text”

El elemento “text” define un elemento gráfico consistentes en texto. Los atributos y propiedades del elemento “text” permiten describir exactamente cómo será visualizado, pero además de poder usar sus propiedades y atributos para formatear el texto, es posible aplicar otras funcionalidades de SVG al texto, como por ejemplo un gradiente, un patrón, un camino de recorte, marcaras o filtros.

Atributos:

• x = “<coordinate>+”
  Si es una simple coordenada, representa el valor absoluto de la coordenada x para la posición de visualización del texto, correspondiente con el primer carácter del elemento.
  Si con comas o con espacios en blanco aparece una lista de <n> <coordinate>, sus valores representan el valor absoluto de las coordenadas x para las posiciones de visualización del texto, correspondientes con cada uno de los <n> primeros caracteres del elemento.
  Si el atributo no es especificado, el efecto es como su tuviera un 0.
• y = “<coordinate>+”
  Si es una simple coordenada, representa el valor absoluto de la coordenada y para la posición de visualización del texto, correspondiente con el primer carácter del elemento.
  Si con comas o con espacios en blanco aparece una lista de <n> <coordinate>, sus valores representan el valor absoluto de las coordenadas y para las posiciones de visualización del texto, correspondientes con cada uno de los <n> primeros caracteres del elemento.
  Si el atributo no es especificado, el efecto es como su tuviera un 0.
• dx = “<length>+”
  Desplaza los caracteres del texto a lo lago del eje x a partir de la posición actual en x unidades. Si el atributo no es especificado en el elemento o en alguno de sus descendiente, el texto no sufrirá ningún desplazamiento adicional.
• dy = “<length>+”
  Desplaza los caracteres del texto a lo lago del eje x a partir de la posición actual en x unidades. Si el atributo no es especificado en el elemento o en alguno de sus descendiente, el texto no sufrirá ningún desplazamiento adicional.
• rotate = “<number>+”
  Rota los caracteres del texto a partir de la posición actual. Si el atributo no es especificado en el elemento o en alguno de sus descendiente, el texto no sufrirá ninguna rotación adicional.

Ejemplo:

<?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=”10cm” height=”3cm” viewBox=”0 0 1000 300″
     xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
  <desc>Example text01 – ‘Hello, out there’ in blue</desc>
  <text x=”250″ y=”150″
        font-family=”Verdana” font-size=”55″ fill=”blue” >
    Hello, out there
  </text>
  <!– Show outline of canvas using ‘rect’ element –>
  <rect x=”1″ y=”1″ width=”998″ height=”298″
        fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>