Allineamento del testo in SVG

Question

Sto cercando di creare documenti XML SVG con un misto di righe e brevi frammenti di testo (in genere due o tre parole).Il problema principale che sto riscontrando è allineare il testo con i segmenti di linea.

Per l'allineamento orizzontale posso usare text-anchor con left, middle O right.Non riesco a trovare un equivalente per l'allineamento verticale; alignment-baseline non sembra farlo, quindi al momento lo sto usando dy="0.5ex" come un kludge per l'allineamento centrale.

Esiste un modo corretto per allinearlo al centro verticale o alla parte superiore del testo?

Answer 1

Si scopre che non sono necessari percorsi di testo espliciti.Firefox 3 supporta solo parzialmente i tag di allineamento verticale (vedere questo thread).Sembra anche che dominant-baseline funzioni solo se applicato come stile mentre text-anchor può far parte dello stile o di un attributo 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>

Funziona con Firefox.Sfortunatamente Inkscape non sembra gestire la linea di base dominante (o almeno non nello stesso modo).

Answer 2

Questo effetto può infatti essere ottenuto fissando alignment-baseline A central O middle.