[svg] SVG에서 텍스트 요소의 수직 정렬

Program / 글쓴이

SVG 파일이 있다고 가정 해 보겠습니다.

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

어떻게 든의 상단을 정렬 할 a및 b. 실제로, 내 위치 roofline가 baseline! 대신에 따르기를 원합니다 !

답변

alignment-baseline찾고 있는 속성은 다음 값을 사용할 수 있습니다.

auto | baseline | before-edge | text-before-edge |
middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical |
inherit

w3c의 설명

이 속성은 객체가 부모를 기준으로 정렬되는 방법을 지정합니다. 이 속성은이 요소의 기준선을 부모의 해당 기준선과 정렬하도록 지정합니다. 예를 들어, 로마자 텍스트의 알파벳 기준선은 글꼴 크기 변경에 따라 정렬되어 있습니다. 기본적으로 alignment-baseline 속성의 계산 된 값과 이름이 같은 기준선이 사용됩니다. 즉, 블록-진행 방향에서 “아이디 오 그래픽”정렬 지점의 위치는 정렬 될 객체의 기준선-테이블에서 “아이소 그래픽”기준선의 위치이다.

W3C 소스

불행히도, 이것이 당신이 그것을 본 후에 “올바른”방법이지만 Firefox가 SVG 텍스트 모듈에 대한 많은 프리젠 테이션 속성을 구현하지 않았습니다 ( ‘SVG in Firefox’MDN Documentation )

답변

SVG 사양에 따르면, alignment-baseline단지에 적용 <tspan>, <textPath>, <tref>와 <altGlyph>. 내 이해는 그것이 <text>위 의 물체 에서 그것들을 상쇄시키는 데 사용된다는 것입니다 . 나는 당신이 찾고있는 것이라고 생각합니다 dominant-baseline.

가능한 값 dominant-baseline은 다음 과 같습니다.

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

가능한 각 값에 대한 자세한 정보는 기본 기준 특성에 대한 W3C 권장 사항을 확인하십시오 .

답변

attr ( “주요 기준”, “중앙”)

답변

IE에서 이것을 테스트하는 경우 지배적 기준선과 정렬 기준선이 지원되지 않습니다.

IE에서 텍스트를 중앙에 배치하는 가장 효과적인 방법은 “dy”와 같은 것을 사용하는 것입니다.

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

음수 값은 위로 이동하고 양수 값 dy는 아래로 이동합니다. 나는 -.4em을 사용하는 것이 -.5em보다 세로로 더 집중되어있는 것처럼 보이지만 당신은 그것을 판단 할 것입니다.

답변

SVG 권장 사항을 살펴본 후 , 기본 속성이 다른 글꼴과 언어를 혼합 할 때 특히 다른 텍스트를 기준으로 텍스트를 배치한다는 의미를 이해했습니다. 텍스트가 맨 위에 오도록 텍스트를 배치 y하려면을 사용해야 dy = "y + the height of your text"합니다.

답변