SVG <textPath>
SVG 텍스트 – <textPath>
<textPath> 요소는 경로의 모양을 따라 텍스트를 렌더링하는 데 사용한다.
<textPath> 요소는 6가지 기본 속성을 가진다.
| 속성명 | 설명 |
|---|---|
| href | 텍스트를 렌더링할 경로의 URL. |
| lengthAdjust | textLength 속성으로 정의된 너비에 맞추기 위해 텍스트를 어떻게 압축하거나 늘릴지 지정한다. spacing 또는 spacingAndGlyphs를 사용할 수 있으며, 기본값은 spacing이다. |
| method | 경로를 따라 글리프를 어떻게 렌더링할지 지정한다. align 또는 stretch를 사용할 수 있으며, 기본값은 align이다. |
| spacing | 글리프 사이의 간격. auto 또는 exact를 사용할 수 있으며, 기본값은 exact이다. |
| startOffset | 텍스트 시작점이 경로 시작점에서 얼마나 떨어져야 하는지 지정한다. 길이, 백분율 또는 숫자를 사용할 수 있다. |
| textLength | 경로를 따라가는 텍스트의 너비. 길이, 백분율 또는 숫자를 사용할 수 있으며, 기본값은 auto이다. |
경로를 따라가는 텍스트
<text> 요소 내에서 <textPath> 요소를 사용하는 방법이다.
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" startOffset="80">I love SVG! I love SVG!</textPath>
</text>
</svg>또 다른 경로를 따라가는 텍스트
여기서는 textLength 속성을 사용하여 텍스트 너비를 경로의 100%로 정의한다.
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" textLength="100%" startOffset="20">I love SVG! I love SVG!</textPath>
</text>
</svg>참고
W3C School - SVG <text> and <tspan>
