Alineando texto en SVG

Question

Estoy tratando de hacer documentos SVG XML con una mezcla de líneas y breves fragmentos de texto (dos o tres palabras típicamente). El principal problema que tengo es alinear el texto con los segmentos de línea.

Para la alineación horizontal puedo usar text-anchor con left, middle o right. No puedo encontrar un equivalente para la alineación vertical; alignment-baseline parece que no lo hace, así que en este momento estoy usando dy="0.5ex" como un kludge para la alineación central.

¿Hay una manera adecuada de alinear con el centro vertical o la parte superior del texto?

Answer 1

Resulta que no necesita caminos de texto explícitos. Firefox 3 solo tiene soporte parcial de las etiquetas de alineación vertical (see this thread). También parece que la línea de base dominante solo funciona cuando se aplica como un estilo, mientras que el anclaje de texto puede ser parte del estilo o un atributo de etiqueta.

<path d="M10, 20 L17, 20" 
     style="fill:none; color:black; stroke:black; stroke-width:1.00"/> 
<text fill="black" font-family="sans-serif" font-size="16" 
     x="27" y="20" style="dominant-baseline: central;"> 
    Vertical 
</text> 

<path d="M60, 40 L60, 47" 
     style="fill:none; color:red; stroke:red; stroke-width:1.00"/> 
<text fill="red" font-family="sans-serif" font-size="16" 
     x="60" y="70" style="text-anchor: middle;"> 
    Horizontal 
</text> 

<path d="M60, 90 L60, 97" 
     style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/> 
<text fill="blue" font-family="sans-serif" font-size="16" 
     x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;"> 
    Bit of Both 
</text> 

Esto funciona en Firefox. Desafortunadamente, Inkscape no parece manejar la línea base dominante (o al menos no de la misma manera).

Answer 2

De hecho, este efecto se puede lograr estableciendo alignment-baseline en central o middle.