본문 바로가기
CSS/SVG

[SVG]svg 시작해보기3 - TEXT

by 알찬 퍼블리셔 2019. 5. 27.
728x90
반응형

svg 안에 <text>를 이용해 글자를 넣습니다.

 

x,y 텍스트가 위치할 위치를 지정합니다.
dx, dy x,y를 기준으로 이동시키는 상대좌표를 지정합니다.
rotate

각 글자수 마다 회전 각도를 지정할수 있습니다. 

(갯수가 일치하지않으면 별도 설정값을 갖지못할 글자는 모두 마지막 설정을 갖게 됩니다 )

textLength

텍스트 길이를 설정합니다.

(이 길이 값에 따라 글자간의 간격이 조정됩니다.)

letter-spacing

글자 간격 조정 

word-spacing

단어 간격 조정

text-decoration

글자 꾸밈 

(overline / underline / line-through ..)

 

 

<tspan>을 이용해 글자를 나눠서 각 글자마다 설정을 다르게 줄 수 있습니다. 

 

dy 각 tspan요소의 높이 지정 

 

 

 

728x90
반응형

댓글