SVG 텍스트
SVG 텍스트 - <text>
<text> 요소는 텍스트를 정의하는 데 사용됩니다.
예제 1
텍스트 쓰기:
I love SVG
다음은 SVG 코드입니다. 🎜>
인스턴스
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭). <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg> </body> </html>
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
예 2회전된 텍스트:
예
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Opera의 경우 사용자: SVG 파일 보기(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭). <!DOCTYPE html> <html> <body> <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> </body> </html>
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
예 3경로의 텍스트:
인스턴스
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭). <!DOCTYPE html> <html> <body> <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> </body> </html>
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
예제 4 요소는 <tspan> 요소를 사용하여 여러 그룹으로 정렬할 수 있습니다. 각 <tspan> 요소에는 다양한 형식과 위치가 포함될 수 있습니다. 여러 줄의 텍스트(<tspan> 요소 포함):
여러 줄:
첫 번째 줄 두 번째 줄
다음은 SVG 코드입니다.Instance
<!DOCTYPE html> <html> <body> <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> </body> </html>
인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스 보기
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭). 예 5
를 링크 텍스트(<a> 요소)로 사용: 아래
I love SVG
SVG 코드는 다음과 같습니다.인스턴스
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://www.php.cn/" target="_blank"> <text x="0" y="15" fill="red">I love SVG</text> </a> </svg> </body> </html>
인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
