SVG에서 텍스트 정렬

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

가로 맞춤의 경우 left, middle 또는 right과 함께 text-anchor을 사용할 수 있습니다. 수직 정렬에 해당하는 항목을 찾을 수 없습니다. alignment-baseline은 그렇게하지 않는 것 같습니다. 따라서 현재 센터 정렬을위한 골목으로 dy="0.5ex"을 사용하고 있습니다.

텍스트의 세로 중심이나 상단에 정렬하는 적절한 방법이 있습니까?

출처

2008-09-11 Ian G

+17

나는 당신의 수평 가정에 오류가 있다고 생각합니다. http://www.w3.org/TR/SVG/text.html#TextAnchorProperty에 따르면'text-anchor '에 허용되는 값은'start | 중간 | 끝 | 상속하다. "왼쪽"과 "오른쪽"은 허용되지 않습니다. – Juve

명시 적 텍스트 경로가 필요하지 않습니다. Firefox 3은 수직 정렬 태그 (see this thread)만을 부분적으로 지원합니다. 또한 지배적 인 기준선은 스타일로 적용될 때만 작동하며 텍스트 앵커는 스타일 또는 태그 속성의 일부가 될 수 있습니다.

<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는 지배적 인 기준선을 처리하지 못합니다 (적어도 동일한 방식으로 이루어지지는 않습니다).

출처

2008-09-16 14:57:13

슬프게도, 2011 년 11 월 현재, Firefox는 여전히 '지배적 인 기준선'을 지원하는 유일한 브라우저입니다. 나는 여전히 1/2 글꼴 크기'에 의해 설정된 를 요구합니다. – Travis

나는 적어도 Chrome에서도 지원한다고 말하고 싶습니다. – jjmontes

Safari가 지금 지원하는 것 같습니다. –

이 효과는 실제로 alignment-baseline에서 central 또는 middle으로 설정하여 얻을 수 있습니다.

출처

2014-05-15 14:25:49 mjswensen

SVG에서 텍스트 정렬

답변

관련 문제