Texto

A diferencia de HTML, no se puede insertar texto dentro de ningún elemento. Es necesario crear objetos de texto usando el elemento <text> con contenido textual. Se puede posicionar el texto usando los atributos x e y, pero hay que recordar que y es la línea base (predeterminada). Si y es cero o no está presente, solo las partes del texto que se extienden por debajo de la línea base serán visibles dentro del contexto gráfico.

Este ejemplo coloca el texto y un rectángulo en la misma posición:

<rect x="0" y="0" height="36" width="200" />
<text font-size="36" x="0" y="0" fill="lightgray">ghijklmnop</text>

La siguiente ilustración muestra el resultado a la izquierda. Tenga en cuenta que solo las partes del texto que se extienden por debajo de la línea base aparecen sobre el rectángulo. Los otros dos ejemplos muestran texto con una alineación de línea base diferente: alignment-baseline="middle" y alignment-baseline="hanging".

También puede alinear el texto horizontalmente con el atributo text-anchor. La siguiente ilustración describe las propiedades y los valores utilizados para alinear el texto horizontal o verticalmente. Si desea rotar el texto respecto a su posición, estos parámetros afectarán el resultado.

Es mejor configurar líneas de base y alineaciones en CSS en lugar de utilizar atributos XML.

Si su texto abarca varias líneas, puede usar el elemento <tspan> dentro de <text> para mover palabras o letras a posiciones relativas al elemento <text> padre (consulte SVG/16-tspan.html).