SVG 튜토리얼

SVG 요소

SVG <textPath> 요소

SVG <textpath> 요소는 텍스트를 경로(예: 원)에 따라 배치하여 멋진 효과를 만듭니다. 다른 브라우저는 경로에 텍스트를 표시하는 방식이 약간 다릅니다. 따라서 지원 브라우저에서 텍스트의 외관을 확인해야 합니다.

온라인 예제

예시

<svg width="500"　height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1　0 0,0　100,0"　/>　　　　
</defs>　　　　
<text　x="20"　y="80"　style="stroke:　#000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com 기본 강의...</textPath>　　　　
</text>　　　　
</svg>

테스트를 해보세요‹/›

실행 후 이미지 효과:

path 요소(요소 내부 <defs>)가 id 속성을 어떻게 가지고 있는지 주목해 주세요. 이 id 속성 값은 xlink:href 속성을 통해 요소에서 <textpath>를 참조합니다.

경로의 길이가 텍스트의 길이보다 짧다면, 경로 확장 범위 내의 텍스트만 그립니다.

또한 더 고급한 경로를 사용할 수도 있습니다. 이는 더 복잡한 텍스트 경로 예시입니다:

예시

<svg　width="500"　height="200">
　　　　<defs>
　　　　　　　　<path　id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20　l100,0　l100,30　q0,100　150,100"/>
　　　　</defs>
　　　　<text　x="20"　y="40"　style="stroke:　#000000;">
　　　　　　　　<textPath　xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com　기본 튜토리얼....
　　　　　　　　</textPath>
　　　　</text>
</svg>

테스트를 해보세요‹/›

이 예제는 수평선, 대각선, 곡선으로 구성된 텍스트 경로를 정의합니다.

실행 후 이미지 효과:

SVG <a> 요소 SVG <tref> 요소