최신 웹 개발 튜토리얼
 

SVG <텍스트>


SVG 텍스트 - <text>

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


예 1

텍스트 쓰기 :

나는 SVG를 사랑 해요! 죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

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

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>
»그것을 자신을 시도

예 2

텍스트를 회전 :

죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

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

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
»그것을 자신을 시도

예 3

<text> 요소는 함께 하위 그룹의 개수로 배치 될 수있다 <tspan> 엘리먼트. 각 <tspan> 요소는 다른 형식 및 위치를 포함 할 수 있습니다.

여러 줄의 텍스트 (with the <tspan> element) :

여러 라인 : 첫 번째 줄. 두 번째 줄. 죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

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

<svg height="90" width="200">
  <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>
»그것을 자신을 시도

예 4

링크로 텍스트 (with the <a> element) :

나는 SVG를 사랑 해요! 죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

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

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.w3ii.com/svg/default.html" target="_blank">
    <text x="0" y="15" fill="red">I love SVG!</text>
  </a>
</svg>
»그것을 자신을 시도