[SVG] 텍스트

기본 속성

좌표	속성	속성
절대 좌표	x	y
상대 좌표	dx	dy

추가적으로 dx, dy 속성을 사용하면 설정된 좌표에 상대적으로 위치 이동시킬 수 있다.

---

CSS 속성과 동일한 속성

속성	설명
word-spacing	단어 간격을 일괄적으로 적용
text-decoration	텍스트 밑줄, 윗줄, 가운데줄 처리가 가능

---

가로 정렬

text-anchor속성은 미리 서식이 지정된 텍스트 또는 자동 줄 바꿈 된 텍스트 문자열을 정렬하는 데 사용된다.

여기서 줄 바꿈 영역은 inline-size로 지정된 지점을 기준으로 결정된다. 

속성	속성 값	설명
text-anchor	start (기본값)	시작 정렬
	middle	중앙 정렬
	end	끝 정렬

세로 정렬

속성	속성 값	설명
dominant-baseline	auto (기본값)	이미지 참고
	middle	이미지 참고
	hanging	이미지 참고

---

회전 속성

rotate 속성을 사용하면 글자 마다 회전을 시킬 수 있다. 설정한 회전 값 개수와 글자 수가 일치하지 않으면, 별도의 값이 설정되지 않은 글자는 마지막 설정 값을 따르게 된다.

See the Pen [SVG] text 회전 속성 by mill (@millfeel) on CodePen.

---

텍스트 길이와 길이 조정 속성

속성 값	설명
텍스트 길이 속성
textLength	텍스트 길이에 설정된 길이에 맞게 문자 사이의 공백을 숫자로 조정한다.
spacing (기본값)	textLength속성에 정의 된 길이로 텍스트가 늘어나는 방식을 제어하고, 글자 간격을 공간을 채우기 위해 조정한다.
spacingAndGlyphs	textLength속성에 정의 된 길이로 텍스트가 늘어나는 방식을 제어하고, 글자 간격 뿐만 아니라 글리프 크기까지 조정한다.

See the Pen [SVG] 텍스트 길이와 길이 조정 속성 by mill (@millfeel) on CodePen.

---

<tspan>요소

SVG에서 자동 줄 바꿈 또는 줄 바꿈을 지원하지 않기 때문에 중요하다. 특정 단어나 글자를 개별적으로 조작하여 별도의 디자인을 수행할 수 있다. 개별 제어 할 때 새로운 좌표 설정 대신 이전 텍스트에 상대적으로 위치 설정이 가능하다.

*text span 같은 느낌이라서 tspan인 듯하다.

---

<textPath>요소

<text>요소의 자식요소로 사용된다.

<defs>요소에 저장된 형태를 id로 불러와서 <textPath>요소에 href="#id"속성을 사용한다.

See the Pen [SVG] 패스를 따라 흐르는 텍스트 by mill (@millfeel) on CodePen.

---

[공부 좌표]

SVG 텍스트