수색…
매개 변수
<text> | 세부 |
---|---|
엑스 | 텍스트의 x 위치입니다. |
와이 | 텍스트의 y 위치입니다. |
DX | x 위치의 상대적인 이동. |
염료 | y 위치의 상대적인 시프트. |
회전하다 | 텍스트 그림 문자의 각 변위를 지정합니다. |
텍스트 길이 | 지정된 길이에 텍스트를 맞 춥니 다. |
길이 조정 | 커닝 또는 커닝 및 글리프가 텍스트 길이에 맞게 텍스트가 압축 / 확대되는지 여부를 지정합니다. 값 : spacing 또는 spacingAndGlyphs |
- | 모든 텍스트 청킹 요소 (text, tref, textPath, tspan)에 공통된 매개 변수 |
텍스트 앵커 | 수평 정렬을 지정합니다. 값 : 시작, 중간, 끝. |
기준선 이동 | 위 첨자 또는 아래 첨자 포지셔닝 (sub, super) 또는 양수 또는 음수 % 또는 길이에 대한 폰트 테이블에 제공된 값을 기준으로 텍스트 기준선을 이동합니다. 값 : sub, super, % 또는 length. |
비고
Baseline-Shift는 2016 년 7 월 현재 Firefox 및 Microsoft 브라우저의 최신 버전에서 지원되지 않습니다.
텍스트 그리기
<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에 대한 값의 배열을 받아 문자의 개별 배치를 지원합니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow