SVG
본문

매개 변수

비고

텍스트 그리기

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="40" y="60" font-size="28">Hello World!</text>
</svg>

x 및 y 좌표는 텍스트의 왼쪽 하단 모서리 위치를 지정합니다 (텍스트 앵커가 수정되지 않은 경우).

최고 및 아래 첨자

baseline-shift 매개 변수를 사용하여 수퍼 또는 첨자를 지정할 수 있습니다. 그러나 이것은 모든 주요 브라우저에서 지원되는 것은 아닙니다.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="20">x<tspan baseline-shift="super">2</tspan></text>
    <text x="10" y="60">f<tspan baseline-shift="sub">x</tspan></text>
</svg>

크로스 브라우저 솔루션의 경우 dy, dx 및 상대 글꼴 크기를 사용할 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="40">x<tspan dy="-7" font-size=".7em">2</tspan></text>
    <text x="10" y="80">f<tspan dy="3" font-size=".7em">x</tspan></text>
</svg>

텍스트 회전

rotate 속성은 각 문자를 지정된 각도만큼 회전시킵니다.

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="20" rotate="30">Each character is rotated</text>
</svg>

전체 텍스트 요소를 회전하려면 transform 속성을 사용해야합니다.

<svg xmlns="http://www.w3.org/2000/svg">
    <text transform="translate(10, 60) rotate(30)">The whole text is rotated</text>
</svg>

X 및 Y 값의 배열로 개별 문자 위치 지정

<svg width="400px" height="200px"> 
 <text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em">
    Individually Spaced Text
  </text>
</svg>

Text 요소는 x 및 y에 대한 값의 배열을 받아 문자의 개별 배치를 지원합니다.