y 방향에서 text-align = "middle"_only_?

Question

text-align="middle"을 텍스트를 가운데 맞추기 위해 텍스트 요소에 사용할 수 있습니다. 사실 이것은 x 방향에서만 효과가 있습니다. y 방향에 대해서는 이안 G의 해킹을 Aligning text in SVG에서 사용합니다.

y 방향으로 텍스트를 가운데에 놓고 싶지만 x 방향으로 텍스트를 왼쪽 정렬하려면 어떻게해야합니까? 예를 들어, 오른쪽에 rect -element 및 text -element가 있습니다. 텍스트는 rect와 관련하여 가운데에 나타나도록 세로로 정렬되어야합니다. 따라서 text-align="middle" 속성을 사용합니다. 하지만 x 방향으로 텍스트를 왼쪽 정렬하고 싶습니다 (rect의 오른쪽에 표시하고 싶기 때문에). 이는 작동하지 않습니다. text-align은 항상 x 및 y 값을 모두 적용하기 때문입니다.

실제로 저는 이러한 방식으로 수직 배열에 만족하지 않고 다른 것을 선호합니다. 그러나 아직 더 나은 해결책을 찾지 못했습니다. (나는 그것을 지원하지 않는 Batik을 사용하고 있기 때문에 dominant-baseline 속성을 사용할 수 없습니다.) SVG에서는 상승/하강/기준선을 쿼리 할 수있는 방법이 없으므로 직접 계산할 수도 없습니다. 세례반.

Answer 1

발견 한 것처럼 baseline 관련 속성은 보편적으로 지원되지 않습니다 (아직).

하나의 가능한 솔루션은 수직 중심 맞춤을 위해 이전 CSS 트릭과 비슷한 방법을 사용하는 것입니다.

텍스트의 y 좌표를 가운데에 올리려는 개체의 세로 중심으로 설정하십시오. 그런 다음 em 값이있는 dy를 사용하여 텍스트를 사실적으로 조정하십시오.

<text x="0" y="100" font-family="Verdana" font-size="20pt" dy="0.35em">Some TEXT</text> 

dy의 양은 글꼴의 시각적 중심이 정확히 절반 전각 높이 수 없기 때문에 당신이 생각하는 것 같이 0.5em되지 않습니다. 글꼴마다 다릅니다. 그러나 특정 글꼴에 대해 좋은 dy 값을 찾으면 모든 글꼴 크기에서 작동해야합니다. 여기

데모 : http://jsfiddle.net/js88W/1/

그것을 중심으로 유지됩니다 확인하기 위해 글꼴 크기 값을 변경하십시오.