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 속성의 계산 된 값과 이름이 같은 기준선이 사용됩니다. 즉, 블록-진행 방향에서 “아이디 오 그래픽”정렬 지점의 위치는 정렬 될 객체의 기준선-테이블에서 “아이소 그래픽”기준선의 위치이다.
불행히도, 이것이 당신이 그것을 본 후에 “올바른”방법이지만 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"
합니다.