⇪

Escribiendo en el SVG

facebook-svg gplus-svg twitter-svg

Un ejemplo básico:

Para escribir en el SVG utilizamos el elemento <text>. En el siguiente ejemplo la línea roja dibujada con <path> representa la línea base del texto ( alignment baseline ).

Definición: En tipografía y caligrafía la línea base es la línea sobre la que se asientan la mayoría de las letras y por debajo de la cual se extienden los trazos descendentes.



   línea base del texto
línea base del texto

El elemento <text> puede ser utilizado junto con una serie de atributos entre los cuales los más importantes son x e y. En este ejemplo el atributo x representa la coordenada horizontal del punto donde empieza el texto. Tanto la x como la y coinciden con el punto de partida de la línea base del texto ( la línea roja trazada con <path> ).

  <text x = "30" y = "40" style="font-family: Consolas">línea base del texto</text>
  <path class= "linea_base" d= "m30,40 h180" style="stroke:#f00;. . .

stroke, stroke-width, fill

El atributo fill decide el color de relleno del texto, y de cualquier objeto SVG. Si no definimos el color de relleno, este es por defecto negro.
El atributo stroke pone, letra por letra, un borde al texto. Por defecto el texto, y todos los demás objetos SVG, no tienen borde.
El atributo stroke-width define la anchura del borde. 



   relleno rojo
   borde negro
   borde de 2px
relleno rojo borde negro borde de 2px

font-family, font-size,
letter-spacing, word-spacing, text-decoration...

El texto SVG acepta una serie de atributos conocidos desde CSS como: font-family, font-size, letter-spacing, word-spacing, text-decoration... Pueden der utilizados tanto como atributos ( font-size="18" )  o como propiedades CSS ( style="font-size:18px" )



  atributo
  propiedad CSS
atributo propiedad CSS

A continuación damos una lista indicativa y no exhaustiva con los atributos que pueden ser utilizados con <text>.

Atributo Ejemplo Descripcion
stroke style = "stroke: #000000";
o
stroke = "black"		 El color de la línea que dibuja un borde alrededor del texto. Por defecto el texto tiene solo color de relleno. Al ponerle un borde, el texto aparece como negrita.
stroke-width style = "stroke-width : 2";
o
stroke-width = "2"		 El grosor de línea que dibuja un borde alrededor del texto.
fill style = "fill: #00ff00;"
o
fill="#00ff00"		 El color de relleno del texto.
rotate rotate="0 10 20 30..." Puede tomar como valor una lista de números indicando la rotación individual en grados sexagesimales de cada carácter del elemento <text> o <tspan>.
font-family style = "font-family: Verdana;" La familia de fuente a utilizar .
font-size style = "font-size:16px;" El tamaño de fuente.
kerning style = "kerning:2;" Espaciado entre letras.
letter-spacing style = "letter-spacing:3;" Espaciado entre letras; similar a  kerning.
word-spacing  style = "word-spacing:3;" Espaciado entre palabras.
text-decoration  style = "text-decoration: underline;" Decoración de texto. Puede tomar uno de estos valores: underline, overline
o line-through.
text-anchor style = "text-anchor: start" start, middle, end
dominant-baseline dominant-baseline: middle auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle |
text-after-edge | text-before-edge | inherit
baseline-shift baseline-shift: super; auto | baseline |
sup | sub | porcentaje | extensión | inherit
text
Length		 textLength = "150" número
length
Adjust		 lengthAdjust = "spacing" spacing | spacingAndGlyphs
writing-mode style = "writing-mode: tb;" tb (Top to Bottom = de arriba a abajo);
rl (right to left =
de derecha a izquierda );
lr (left to right =
de izquierda a derecha);
start
Offset		 startOffset = "30%" porcentaje
glyph-orientation-vertical glyph-orientation-vertical = "90" grados
sexagesimales
glyph-orientation-horizontal glyph-orientation-horizontal = "270" grados
sexagesimales
direction style = "direction: rtl;" rtl (right to left);
ltr (left to right);