SVG 튜토리얼

SVG 요소

SVG <text> 텍스트

SVG <text> 요소는 SVG 이미지에 텍스트를 그리는 데 사용됩니다. svg에서 <text> 요소를 사용하여 텍스트 그리기, 텍스트 회전, 다중 행 텍스트, 슈퍼링크 텍스트 등을 구현할 수 있습니다.

텍스트를 그리기 위해 <text> 요소를 사용합니다.

예제

　　　　　　<h1>SVG　텍스트</h1>
　　　　　　<svg　width="550"　height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<텍스트　x="40"　y="23"　>텍스트:　</text>
　　　　　　　　　　　　<텍스트　x="40"　y="40"　fill="rgb(121,0,121)">ko.oldtoolbag.com　기본 튜토리얼　</text>
　　　　　　　　　</g>　
　　　　　　</svg>

테스트해 보세요‹/›

실행 후 결과는 다음과 같습니다:

SVG 텍스트

사용 설명

x：텍스트의 왼쪽 상단 위치를 정의합니다.

y：텍스트의 상단 위치를 정의합니다.

width: 너비를 정의합니다.

height: 높이를 정의합니다.

fill: fill 속성은 채우기 색상을 정의합니다.

회전 텍스트

이는 회전 텍스트를 생성하는 데 사용됩니다.

예제

<svg　height="100"　width="200">
　　<text　x="0"　y="1530　20,40)">ko.oldtoolbag.com</text>
</svg>

테스트해 보세요‹/›

실행 후 결과는 다음과 같습니다:

사용 설명

x: 왼쪽 상단 위치를 정의합니다.

y: 상단 위치를 정의합니다.

width: 너비를 정의합니다.

height: 높이를 정의합니다.

fill: fill 속성은 채우기 색상을 정의합니다.

다중 행 텍스트

이는 다중 행 텍스트를 생성하는 데 사용됩니다. <tspan> 요소를 사용하여 <text> 요소를 여러 개의 서브 그룹에 배치할 수 있습니다.

예제

<svg　width="570"　height="100">
　　<g>
　　<텍스트　x="40"　y="23"　다중 행 텍스트:　</text>
　　<텍스트　x="40"　y="40"　fill="rgb(121,0,121)">ko.oldtoolbag.com
　　　<tspan　x="40"　y="60"　font-weight="bold">　온라인 기본 튜토리얼.　</tspan>
　　　</text>
　　</g>
　</svg>

테스트해 보세요‹/›

실행 후 결과는 다음과 같습니다:

사용 설명

x: 왼쪽 상단 위치를 정의합니다.

y: 상단 위치를 정의합니다.

width: 너비를 정의합니다.

height: 높이를 정의합니다.

fill: fill 속성은 채우기 색상을 정의합니다.

슈퍼링크 텍스트

이는 슈퍼링크를 가진 텍스트를 생성하는 데 사용됩니다.

예제

　　　　　　<svg　width="500"　height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<텍스트　x="20"　y="10"　텍스트 링크로:　</text>
　　　　　　　　　
　　　　　　　　　　　　<a　xlink:href="https://ko.oldtoolbag.com/svg-tutorial"　target="_blank">
　　　　　　　　　　　　　　　<text　font-family="Verdana"　font-size="30"　x="40"　y="40"　
　　　　　　　　　　　　　　　fill="rgb(121,0,121)">ko.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

테스트해 보세요‹/›

실행 후 결과는 다음과 같습니다:

사용 설명

x: 왼쪽 상단 위치를 정의합니다.

y: 상단 위치를 정의합니다.

width: 너비를 정의합니다.

height: 높이를 정의합니다.

fill: fill 속성은 채우기 색상을 정의합니다.

SVG <tspan> 요소 SVG <marker> 표시