La alineación del texto en formato SVG

Question

Estoy tratando de hacer SVG XML de los documentos con una mezcla de líneas y breves fragmentos de texto (dos o tres palabras por lo general).El principal problema que estoy teniendo es obtener el texto de la alineación con 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 no parece hacerlo, por lo que en la actualidad estoy usando dy="0.5ex" como un parche para el centro de la alineación.

Es allí una manera apropiada para la alineación vertical en el centro o la parte superior del texto?

Answer 1

Resulta que usted no necesita explícita trazados de texto.Firefox 3 tiene sólo un apoyo parcial de la alineación vertical de las etiquetas (ver este hilo).También parece que dominante de referencia sólo funciona cuando se aplica como un estilo mientras que el texto de anclaje puede ser parte de un estilo o de 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.Por desgracia, Inkscape no parecen manejar dominante de línea de base (o al menos no de la misma manera).

Answer 2

Este efecto puede ser, de hecho, logra mediante el establecimiento de alignment-baseline a central o middle.