xml - formato - svg path

Alineación de texto en SVG

Question

Estoy tratando de crear documentos SVG XML con una combinación 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 no parece hacerlo, por lo que en este momento estoy usando dy="0.5ex" como kludge para la alineación central.

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

Answer 1

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

Answer 2

Resulta que no necesita caminos de texto explícitos. Firefox 3 solo tiene soporte parcial para las etiquetas de alineación vertical ( mira este hilo ). 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).