SVG에서 텍스트 정렬

Question

행과 간단한 텍스트 조각(일반적으로 2~3단어)이 혼합된 SVG XML 문서를 만들려고 합니다.내가 겪고 있는 주요 문제는 텍스트를 선분에 맞춰 정렬하는 것입니다.

수평 정렬을 위해 사용할 수 있습니다 text-anchor ~와 함께 left, middle 또는 right.수직 정렬에 해당하는 것을 찾을 수 없습니다. alignment-baseline 그렇게 하지 않는 것 같아서 현재는 사용하고 있습니다. dy="0.5ex" 중심 정렬을 위한 문제로 사용됩니다.

텍스트의 세로 중앙이나 상단에 정렬하는 적절한 방법이 있나요?

Answer 1

명시적인 텍스트 경로가 필요하지 않은 것으로 나타났습니다.Firefox 3에서는 수직 정렬 태그(이 스레드를 참조하십시오).또한 Dominant-baseline은 스타일로 적용될 때만 작동하는 반면, text-anchor는 스타일이나 태그 속성의 일부일 수 있는 것으로 보입니다.

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

이것은 Firefox에서 작동합니다.불행하게도 Inkscape는 지배적 기준선을 처리하지 못하는 것 같습니다(또는 적어도 같은 방식은 아닙니다).

Answer 2

이 효과는 실제로 설정을 통해 얻을 수 있습니다. alignment-baseline 에게 central 또는 middle.