SVG <text>와 <tspan>
SVG – <text>
<text> 요소는 텍스트를 정의하는 데 사용한다.
경로는 여러 개의 직선이나 곡선을 조합하여 단순하거나 복잡한 모양을 만들 때 사용한다.
<text> 요소는 텍스트의 위치와 회전을 지정하는 7가지 기본 속성을 가진다.
| 속성명 | 설명 |
|---|---|
| x | 텍스트 시작점의 x 위치. 기본값은 0이다. |
| y | 텍스트 시작점의 y 위치. 기본값은 0이다. |
| dx | 텍스트의 수평 이동 위치 (이전 텍스트 위치 기준). |
| dy | 텍스트의 수직 이동 위치 (이전 텍스트 위치 기준). |
| rotate | 텍스트의 각 글자에 적용되는 회전 (도 단위). |
| textLength | 텍스트가 맞춰져야 하는 너비. |
| lengthAdjust | textLength 속성으로 정의된 너비에 맞추기 위해 텍스트를 어떻게 압축하거나 늘릴지 지정한다. |
간단한 텍스트
SVG로 간단한 텍스트를 작성한다.
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="15" fill="red">I love SVG!</text>
</svg>채우기 없는 텍스트
채우기 없이 선만 있는 텍스트다.
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="none" stroke="red" font-size="35">I love SVG!</text>
</svg>채우기와 선이 있는 텍스트
채우기와 선이 모두 있는 텍스트다.
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="pink" stroke="blue" font-size="35">I love SVG!</text>
</svg>텍스트의 각 글자 회전
rotate 속성을 사용하여 텍스트의 각 글자를 지정된 각도만큼 회전시킨다.
<svg height="40" width="200">
<text x="5" y="30" fill="red" font-size="35" rotate="30">I love SVG!</text>
</svg>전체 텍스트 회전
transform 속성을 사용하여 전체 텍스트를 회전시킨다.
<svg height="100" width="200">
<text x="5" y="30" fill="red" font-size="25" transform="rotate(30 20,40)">I love SVG!</text>
</svg>SVG – <tspan>
<tspan> 요소는 텍스트의 일부를 마크업하는 데 사용한다 (HTML <span> 요소와 유사).
<tspan> 요소는
<tspan> 요소는 텍스트의 위치와 회전을 지정하는 6가지 기본 속성을 가진다.
| 속성명 | 설명 |
|---|---|
| x | tspan 내 텍스트 시작점의 새로운 절대 x 위치를 설정한다. |
| y | tspan 내 텍스트 시작점의 새로운 절대 y 위치를 설정한다. |
| dx | tspan 내 텍스트의 수평 이동 위치 (이전 텍스트 위치 기준). |
| dy | tspan 내 텍스트의 수직 이동 위치 (이전 텍스트 위치 기준). |
| rotate | tspan 내 텍스트의 각 글자에 적용되는 회전 (도 단위). |
| textLength | tspan 내 텍스트가 맞춰져야 하는 너비. |
예제
<textn> 요소 내에서 <tspan> 요소를 사용한다.
<svg height="40" width="250" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="red" font-size="35">I Love
<tspan fill="none" stroke="green">SVG</tspan>!
</text>
</svg>참고
W3C School - SVG <text> and <tspan>
