Alinhando texto em SVG

Question

Estou tentando criar documentos SVG XML com uma mistura de linhas e breves trechos de texto (normalmente duas ou três palavras).O principal problema que estou tendo é alinhar o texto com os segmentos de linha.

Para alinhamento horizontal posso usar text-anchor com left, middle ou right.Não consigo encontrar equivalente para alinhamento vertical; alignment-baseline não parece funcionar, então no momento estou usando dy="0.5ex" como um kludge para alinhamento central.

Existe uma maneira adequada de alinhar com o centro vertical ou superior do texto?

Answer 1

Acontece que você não precisa de caminhos de texto explícitos.O Firefox 3 tem suporte apenas parcial para tags de alinhamento vertical (veja este tópico).Parece também que a linha de base dominante só funciona quando aplicada como um estilo, enquanto a âncora de texto pode fazer parte do estilo ou de um atributo de tag.

<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>

Isso funciona no Firefox.Infelizmente, o Inkscape não parece lidar com a linha de base dominante (ou pelo menos não da mesma maneira).

Answer 2

Este efeito pode de fato ser alcançado definindo alignment-baseline para central ou middle.