Text in SVG ausrichten

Ich versuche, SVG-XML-Dokumente mit einer Mischung aus Zeilen und kurzen Textausschnitten (normalerweise zwei oder drei Wörter) zu erstellen. Das Hauptproblem, das ich habe, besteht darin, den Text an Liniensegmenten auszurichten.

Für die horizontale Ausrichtung kann ich text-anchormit left, middleoder right. Ich kann kein Äquivalent für die vertikale Ausrichtung finden. alignment-baselinescheint es nicht zu tun, also benutze ich es derzeit dy="0.5ex"als Kludge für die Ausrichtung der Mitte.

Gibt es eine geeignete Methode zum Ausrichten an der vertikalen Mitte oder am oberen Rand des Textes?

Es stellt sich heraus, dass Sie keine expliziten Textpfade benötigen. Firefox 3 unterstützt die vertikalen Ausrichtungs-Tags nur teilweise ( siehe diesen Thread ). Es scheint auch, dass die dominante Grundlinie nur funktioniert, wenn sie als Stil angewendet wird, während der Textanker Teil des Stils oder eines Tag-Attributs sein kann.

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

Dies funktioniert in Firefox. Leider scheint Inkscape nicht mit der Dominant-Baseline umzugehen (oder zumindest nicht auf die gleiche Weise).

Dieser Effekt kann tatsächlich durch Einstellen alignment-baselineauf centraloder erreicht werden middle.