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

142

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! 대신에 따르기를 원합니다 !

svg vertical-alignment w3c

— SeMeKh
소스

IE에서 작동하는 유일한 답변 : stackoverflow.com/a/29089222/9069356

— Dominus.Vobiscum

116

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 )

— 사이먼 웨스트
소스

그것에 운이 없었다. 예를 들어 주시겠습니까?

— SeMeKh

2

내 생각에 가장 좋은 대답은 텍스트 벽 페이지로 이동하지 않고 내 대답에 대답했기 때문입니다. 나는 y = 0으로 텍스트를 표시하고 싶지만 화면 밖이었습니다. 그래서 CSS 규칙 "alignment- 기준선 : 행잉 "을 선택하면 SVG 컨테이너에서 가장 높은 지점에 텍스트가 표시되고 화면에서 단일 픽셀이 표시되지 않은 상태에서 정확하게 찾고 있습니다.

— R. Hill

1

@SeMeKh : 흠 우연히 Chromium에서 저에게 도움이되었지만 이제는 Firefox에서 동일한 기능이 작동하지 않는다는 것을 확인했습니다. 따라서이 속성은 현재 브라우저에서 일관되게 지원되지 않는 것 같습니다.

— R. Hill

2

@ R.Hill 11 년 전에 개설 된 파이어 폭스에 대한 버그 리포트는 다음과 같습니다. bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw : '중간'과 '중앙'의 차이점은 무엇입니까?

— mxmlnkn

9

실수로 불쾌감을 주며 이전에도 같은 실수를했기 때문에 취소 할 수 없습니다. ☹은 alignment-baseline: central수행 하지 파이어 폭스에서 SVGs에 대한 작업, 그리고 의도적으로 설계된 것 같다. dominant-baseline: central이 답변에 표시된대로 지금까지 시도한 모든 브라우저에서 작동합니다 : stackoverflow.com/a/15997503/1450294

— Michael Scheper

227

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 권장 사항을 확인하십시오 .

— 투 탕크
소스

8

이 문제는 Firefox ( "alignment-baseline"속성으로 작동하지 않는)의 문제를 해결했습니다. "주요 기준"은 Chrome 및 Firefox에서 작동합니다. 감사!

— Mariano Desanze

5

이 시점에서 IE의 모든 버전에서 작동하지 않는 것을 제외하고는 불행히도 많은 실제 응용 프로그램에는 그렇게 유용하지 않습니다.

— Yona Appletree 2016 년

3

IE 중 하나 지배적-기준, 또는 정렬 - 기준선을 지원하지 않기 때문에, 그렇게 같은 기능에 대한 지원을 확인할 수 있습니다 element.hasAttribute('dominant-baseline'), 그것은 false를 반환하는 경우 적용 dy=-0.4em이 응답에 설명 된대로 stackoverflow.com/a/29089222/2296470

— 티그

1

지배적 인 기준 : 제 경우에는 중앙에서 일했습니다. 감사!

— Liam Mitchell

1

알고 있어야 지배적-기준이 IE10-12에서 지원하지 않는 및 Edge16

— japrescott

47

attr ( "주요 기준", "중앙")

— 사용자 1087079
소스

1

이것은 문자의 중심에 따라 정렬됩니다 (글꼴 글리프가 잘 재생되는 한), 이것이이 질문에 대한 대답인지 확실하지 않습니다.

— matanster

3

이것은 속성을 할당하는 d3 또는 jquery 방법입니다

— 글리프

1

이 솔루션은 기준선을 텍스트의 수직 중심에 놓습니다. y 좌표는 수직 중심에 있습니다. 이것은 내가 찾고있는 대답이었습니다. 감사.

— Henry

1

대답의 핵심은 정확합니다. 기본 기준 속성을 중앙으로 설정하십시오. 그러나 attr ()은 기본 JS 함수가 아니며 설명이 전혀 없습니다.

— jave.web

30

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

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

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

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

— 화 이즈
소스

5

IE에서 작동하는 유일한 답변을 가져 주셔서 감사합니다. 우리가 이것을 해야하는 것은 부끄러운 일이지만 다른 답변은 Chrome / FF에서 모든 것이 작동하는 데 상당한 시간을 낭비했으며 브라우저 테스트 중에 IE에서 작동하지 않는다는 것을 알게되었습니다.

— Yona Appletree 2016 년

멋지고 간단한 결정! 또한 "alignment-baseline"속성을 제거하여이를 지원하는 브라우저에서 텍스트 위치에 미치는 영향을 생략해야합니다.

— YaTaras

7

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

— rjax
소스

사양에 대한 링크를 읽어보십시오. 제 (링크)을 인식하지 되었습니까 "<list-of-lengths>"예를 들어 옵션 (수 문자 별 조작)

— brichins