<text>요소는 SVG 그래픽 내에 텍스트를 마크업 할 때 사용합니다. 많은 속성 옵션을 제공하며, 그레디언트, 패턴, 클리핑 패스, 마스크 또는 필터에도 적용 할 수 있습니다. SVG 그래픽은 일반 그래픽 이미지와 달리 SVG 코드 내에서 쉽게 변경하고 편집 할 수 있어 그래픽에 확장 가능한 텍스트를 포함하는 매우 강력한 기능을 제공합니다.
Copy <svg width="620" height="140" viewBox="0 0 620 140">
<text
x="30" y="90"
fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">
evening
</text>
</svg>
Copy <!-- 링크: https://fonts.google.com/specimen/Leckerli+One -->
<link href="https://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet">
기본 속성
SVG 뷰포트에 <text> 요소를 배치하는 속성입니다. x, y 속성은 절대좌표입니다. 추가적으로 dx, dy 속성을 사용하면 설정된 좌표에 상대적으로 위치 이동시킬 수 있습니다.
아래 코드는 x, y 축으로 위치를 잡은 후, dx 속성 값만큼 x축으로 상대적 위치 이동 시킵니다.
Copy <svg>
<text dx="50%" x="10%" y="50%">SVG</text>
</svg> 회전 속성
rotate 속성을 사용하면 글자 마다 회전을 시킬 수 있습니다. 설정한 회전 값 개수와 글자 수가 일치하지 않으면, 별도의 값이 설정되지 않은 글자는 마지막 설정 값을 따르게 됩니다.
Copy <svg width="400" height="140" viewBox="0 0 400 140">
<text
x="100" y="90" fill="#ED6E46"
font-size="100" font-family="'Leckerli One', cursive"
rotate="4, 8, -8, -4, -20, -24, 48">
evening
</text>
</svg> 텍스트 길이 속성
textLength속성은 텍스트의 길이를 지정합니다. 텍스트 길이에 설정된 길이에 맞게 문자 사이의 공백을 조정합니다.
Copy <svg width="600" height="140" viewBox="0 0 600 140">
<text
x="100" y="90" fill="#ED6E46"
font-size="70" font-family="'Leckerli One', cursive"
textLength="400">
evening
</text>
</svg>
길이 조정 속성
lengthAdjust 속성은 글자 간격, 글리프 크기가 텍스트 길이에 맞게 조정되도록 설정할 수 있습니다.
글자 간격 뿐만 아니라 글리프 크기까지 조정합니다.
기본 값인 spacing 이 아닌, spacingAndGlyphs 값을 설정한 코드는 다음과 같습니다.
Copy <svg width="600" height="140" viewBox="0 0 600 140">
<text
x="100" y="90" fill="#ED6E46"
font-size="70" font-family="'Leckerli One', cursive"
textLength="400"
lengthAdjust="spacingAndGlyphs">
evening
</text>
</svg> <tspan> 요소
<tspan>요소는 SVG에서 자동 줄 바꿈 또는 줄 바꿈을 지원하지 않기 때문에 중요합니다. 특정 단어나 글자를 개별적으로 조작하여 별도의 디자인을 수행할 수 있습니다. 개별 제어 할 때 새로운 좌표 설정 대신 이전 텍스트에 상대적으로 위치 설정이 가능합니다.
Copy <svg width="775" height="600">
<text
x="15" y="150" fill="#e13137"
font-size="60" font-family="'Leckerli One', cursive">
Coca-Cola
<tspan dy="-30" fill="#dfdfdf" font-size="60">is</tspan>
<tspan dy="46" dx="-14" font-size="100">Cool!</tspan>
</text>
</svg> <tspan> 요소의 dy 속성 값으로 나열된 값을 설정 했을 때 각 글자 글리프의 행 높이를 조정할 수 있습니다. 이전 값에 이은 다음 값은 이전 값에 상대적으로 위치 이동됩니다.
Copy <svg width="775" height="600">
<text
x="15" y="150" fill="#e13137"
font-size="60" font-family="'Leckerli One', cursive">
We
<tspan dy="-30 30 30" dx="-10" fill="#dfdfdf" font-size="60">are</tspan>
<tspan dy="45" dx="-14" font-size="100">Champion</tspan>
</text>
</svg>
커닝
커닝은 특정 글자 간격을 조정합니다. kerning속성을 사용하여 사용중인 글꼴에 포함된 커닝 테이블을 기반으로 공간을 조정하거나 고유한 길이를 설정할 수 있습니다. 하지만 안타깝게도 현재 브라우저에서 지원되지 않습니다.
글자 간격 조정
letter-spacing 속성은 CSS 속성과 동일합니다. 글자 간격을 일괄적으로 적용합니다.
Copy <svg>
<text
x="20" y="60%" fill="#e13137"
font-size="60" font-family="'Leckerli One', cursive"
letter-spacing="10">
yamoo9
</text>
</svg> 단어 간격 조정
word-spacing 속성 또한 CSS 속성과 동일합니다. 단어 간격을 일괄적으로 적용합니다.
Copy <svg width="900" height="300">
<text
x="20" y="60%" fill="#448aff"
font-size="40" font-family="'Leckerli One', cursive"
letter-spacing="1"
word-spacing="15">
yamoo9 is nickname.
</text>
</svg> 텍스트 꾸밈
text-decoration 속성 또한 CSS 속성과 동일합니다. 텍스트 밑줄, 윗줄, 가운데줄 처리가 가능합니다.
Copy <svg width="900" height="300">
<text
x="20" y="60%" fill="#448aff"
font-size="40" font-family="'Leckerli One', cursive"
text-decoration="overline underline line-through">
Text Decoration
</text>
</svg> 패스를 따라 흐르는 텍스트
Copy <path d="M100,300 Q200,200 350,300 Q550,450 700,300" /> 다음 단계로 <defs> 요소를 사용해 재 사용할 <path> 데이터를 등록하고 식별 가능한 ID 값을 설합니다.
Copy <defs>
<path id="text-line" d="M100,300 Q200,200 350,300 Q550,450 700,300" />
</defs> 마지막 단계로 <textPath> 요소를 사용해 콘텐츠를 감싼 후, xlink:href 속성 값으로 <path> 요소의 ID 식별자를 대입하여 참조 시킵니다. 전체 코드는 아래와 같습니다.
Copy <svg width="800" height="600">
<defs>
<path id="text-line" d="M100,300 Q200,200 350,300 Q550,450 700,300" />
</defs>
<text
x="20" y="60%" fill="#448aff"
font-size="30" font-family="'Leckerli One', cursive">
<textPath xlink:href="#text-line">
SVG text can use the textPath element and
path data to draw text that flows along the path.
</textPath>
</text>
</svg> 
