SVG: 글자 입력하기

>> 원문: http://www.namo.co.kr/support/techlist/view.php?idx=391&cateflag=&prodflag=WC&keyfield=subject&keyword=&page=2

 

 

<text> 태그를 이용하여 글자의 위치와 내용, 모양을 지정합니다.

 

예) <text x="10" y="10" style="font-family:verdana; fill:red;">Hello</text>

x=글자의 가로 위치, y=글자의 세로 위치, style=글자의 모양

 

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg> <text x="10" y="50" style="font-family:verdana; font-size:20pt; fill:red;">HELLO</text> </svg>

SVG 보기 (text1.svg)

문자열 일부의 모양이나 위치를 바꾸려면 <tspan> 태그를 이용합니다. 
 

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg> <text x="10" y="50" style="font-family:verdana; font-size:20pt; fill:red;"> HE <tspan style="fill:green;">LL</tspan> O </text> </svg>

SVG 보기 (text2.svg)

<tspan> 태그를 이용하여 문자열의 절대 위치 또는 상대 위치를 지정할 수 있습니다.

x=절대 위치 x좌표값, y= 절대 위치 y좌표값
dx=상대 위치 x좌표값(첫 번째 텍스트를 기준으로 상대적인 거리)
dy=상대 위치 y좌표값(첫 번째 텍스트를 기준으로 상대적인 거리) 
 

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg> <text x="10" y="50" style="font-family:verdana; font-size:20pt; fill:red;"> HE <tspan dx="10" dy="10" style="fill:green;">LL</tspan> <tspan dy="-10">O</tspan> </text> </svg>

SVG 보기 (text3.svg)

글자의 크기나 글꼴, 모양 등은 style 속성으로 지정합니다.

font-family : 글꼴

font-size : 글자 크기

font-style : 글자 모양

font-weight : 글자 두께

font-stretch : 장평

 

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg> <text x="10" y="50" style="fill:rgb(0,128,0); stroke:none; stroke-width:0; font-family:Times New Roman; font-size:45pt; font-style:italic; font-stretch:expanded;">SVG</text> </svg>

SVG 보기 (text4.svg)