English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG <tspan> 요소는 SVG에서 다중 행 텍스트를 그리는 데 사용됩니다. 각 행 텍스트를 절대 위치를 정하지 않아도 됩니다. 이 <tspan> 요소는 한 행 텍스트 대신 여러 행 텍스트를 선택하고 복사 붙여넣을 수 있게 합니다.
이것은 간단한 <tspan> 예제입니다：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="20" y="15"> <tspan>tspan 행 1</tspan> <tspan>tspan 행 2</tspan> </text> </svg>테스트를 해보세요‹/›
이는 결과 이미지입니다：
주의하세요, <tspan> 결과가 텍스트 행 간에 (또는 그 이후에) 어떻게 정위치되는지 확인하세요
如果要垂直 상대적으로 라인을 배치하려면 dy 속성(delta y)을 사용할 수 있습니다
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="20" y="15"> <tspan>tspan 행 1</tspan> <tspan dy="10">tspan 행 2</tspan> </text> </svg>테스트를 해보세요‹/›
이제, dy 두 번째 <tspan> 요소의 속성이 " 10”에 따라, 두 번째 텍스트 행은 첫 번째 텍스트 행 아래에 표시됩니다10픽셀에 . 이는 결과 이미지입니다：
如果要 <tspan> 요소를 절대 y 위치 y에 정위치시키려면 <text> 요소와 같이 속성을 사용합니다
dy 속성 내에서 여러 숫자를 입력하면 각 숫자는 <tspan> 요소 내의 텍스트 문자에 적용됩니다. 이는 예제입니다：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="10" y="15"> <tspan dy="5 10 20"> 123 </tspan> </text> </svg>테스트를 해보세요‹/›
이는 생성된 이미지입니다. 주의하세요, 글자 간의 수직 간격이 어떻게 변하는지 확인하세요
x축 상에 텍스트를 상대적으로 정위치시키려면 dx 속성(delta x)을 사용할 수 있습니다. 다음 예제에서는 dx를 설정한 것을 보여줍니다30의 효과입니다. 주의하세요, 지금 두 번째 텍스트 행은 첫 번째 텍스트 행의 끝에 대해 (시작이 아닌) 표시됩니다30픽셀:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="20" y="15"> <tspan>tspan 행 1</tspan> <tspan dx="30" dy="10">tspan 행 2</tspan> </text> </svg>테스트를 해보세요‹/›
이는 결과 이미지입니다：
dx 속성 내에서 여러 숫자를 지정하면 각 숫자는 <tspan> 요소 내의 각 글자에 적용됩니다. 이는 예제입니다：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20"> <tspan dx="5 10 20">123</tspan> </text></svg>테스트를 해보세요‹/›
이는 결과 이미지입니다：
x 속성을 설정하여 텍스트 행의 x 좌표를 고정할 수 있습니다. 모든 조정되지 않은 행의 목록을 서로 아래에 표시하려면 매우 유용합니다. 이는 세 행에서 x를 설정한 예제입니다10 예제：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text y="20"> <tspan x="10">tspan 행 1</tspan> <tspan x="10" dy="15">tspan 행 2</tspan> <tspan x="10" dy="15">tspan 행 3</tspan> </text> </svg>테스트를 해보세요‹/›
이는 결과 이미지입니다：
요소 스타일을 단독으로 설정할 수 있습니다. 따라서, <tspan> 요소를 사용하여 텍스트 블록의 스타일을 설정하여 나머지 텍스트와 다르게 할 수 있습니다. 이는 예제입니다：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20"> 다음은 예제입니다: <tspan 스타일="font-무게: 粗体;">粗体</tspan> 단어. </text></svg>테스트를 해보세요‹/›
이는 결과 이미지입니다：
기본 레이아웃을 사용할 수 있습니다-shift CSS 속성을 사용하여 <tspan> 요소를 통해 상표와 하표를 생성할 수 있습니다. 이는 SVG 기본 레이아웃입니다-shift 예제에서는 다음과 같이 표시됩니다:
<svg 너비="500" 높이="100"> <text x="10" y="20"> 이 텍스트는 다음과 같습니다. <tspan style="baseline"-shift: 상위 인덱스">상위 인덱스</tspan> 및 <tspan style="baseline"-shift: 하위 인덱스">하위 인덱스</tspan> 일반과 혼합 text. </text> </svg>테스트를 해보세요‹/›
이는 생성된 이미지입니다。(주의: firefox는 지원하지 않을 수 있습니다)