Latest web development tutorials

SVG 텍스트

SVG 텍스트 - <텍스트>

<텍스트> 요소는 텍스트를 정의하는 데 사용됩니다.

예 1

텍스트 쓰기 :

다음은 SVG 코드는 다음과 같습니다

예

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

예 2

회전 텍스트 :

다음은 SVG 코드는 다음과 같습니다

예

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

예 3

텍스트 경로 :

다음은 SVG 코드는 다음과 같습니다

예

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

예 4

소집단 요소 및 <tspan> 엘리먼트의 임의의 개수에 배치 될 수있다. 각 <tspan> 요소는 다른 형식 및 위치를 포함 할 수 있습니다. (<tspan> 요소) 텍스트의 몇 줄 :

다음은 SVG 코드는 다음과 같습니다

예

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

예 5

링크 텍스트 (<A> 요소)로 :

다음은 SVG 코드는 다음과 같습니다

예

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
</svg>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).