SVG에서 텍스트 정렬

SVG에서 텍스트 정렬

---

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

수평 정렬을 위해 나는 사용할 수 있습니다 text-anchor로 left, middle또는 right. 수직 정렬에 해당하는 것을 찾을 수 없습니다. alignment-baseline그렇게하지 않는 것 같으므로 현재 dy="0.5ex"는 중앙 정렬을 위해 kludge로 사용 하고 있습니다.

텍스트의 수직 중앙 또는 상단에 정렬하는 적절한 방법이 있습니까?

---

명시적인 텍스트 경로가 필요하지 않다는 것이 밝혀졌습니다. 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는 지배적 기준선을 처리하지 않는 것 같습니다 (또는 적어도 같은 방식은 아닙니다).

---

이 효과는 또는 로 설정 alignment-baseline하여 얻을 수 있습니다 .centralmiddle

참고 URL : https://stackoverflow.com/questions/56402/aligning-text-in-svg