Aligning text in SVG

Aligning text in SVG

I am trying to make SVG XML documents with a mixture of lines and brief text snippets (two or three words typically). The major problem I'm having is getting the text aligning with line segments.

수평 정렬의 경우 사용할 수 있습니다.text-anchor와 함께left,middle아니면right. 수직 정렬에 해당하는 것을 찾을 수 없습니다.alignment-baseline안 하는 것 같아서 지금은 제가 사용하고 있습니다.dy="0.5ex"중심 정렬을 위한 슬러지로서.

Is there a proper manner for aligning with the vertical centre or top of the text?

It turns out that you don't need explicit text paths. Firefox 3 has only partial support of the vertical alignment tags (see this thread). It also seems that dominant-baseline only works when applied as a style whereas text-anchor can be part of the style or a tag attribute.

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

This works in Firefox. Unfortunately Inkscape doesn't seem to handle dominant-baseline (or at least not in the same way).

이 효과는 실제로 설정에 의해 달성될 수 있습니다.alignment-baseline로.central아니면middle.

ReferenceURL : https://stackoverflow.com/questions/56402/aligning-text-in-svg