Ausrichten von text in SVG

Question

Ich versuche, SVG-XML-Dokumente mit einer Mischung aus Linien und kurze text-snippets (zwei oder drei Worte in der Regel).Das große problem das ich habe ist den text ausrichten mit Liniensegmenten.

Für die horizontale Ausrichtung, die ich verwenden kann text-anchor mit left, middle oder right.Ich kann nicht finden, ein äquivalent für die vertikale Ausrichtung; alignment-baseline nicht scheinen, es zu tun, so dass derzeit bin ich mit dy="0.5ex" als eine Behelfslösung für den Center-Ausrichtung.

Gibt es eine richtige Art und Weise für die Ausrichtung mit der vertikalen Mitte oder oben im text?

Answer 1

Es stellt sich heraus, dass Sie nicht explizit Textpfaden brauchen. Firefox 3 hat nur teilweise Unterstützung der vertikalen Ausrichtung Tags ( finden Sie in diesem Thread ). Es scheint auch, dass dominant-Baseline nur, wenn sie als Stil, während Text-Ankerteil des Stils angewandt arbeitet oder ein Tag-Attribut 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 Inkscape scheint nicht dominant-Basislinie (oder zumindest nicht in der gleichen Art und Weise).

zu handhaben

Answer 2

Dieser Effekt kann in der Tat, indem alignment-baseline erreicht werden, um central oder middle.