Escribiendo en el 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.
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.
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"
)
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 | LengthtextLength = "150" | número |
length | AdjustlengthAdjust = "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 | OffsetstartOffset = "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);