Text

SVG <text> 요소는 텍스트로 구성된 그래픽 요소를 그린다.

 

속성

 

• x
  - 텍스트 기준선 시작점의 x 좌표
• y
  - 텍스트 기준선 시작점의 y 좌표

<svg class="text01" width="200" height="100">
    <text x="10" y="50">hello svg</text>
</svg>

• dx
  - 이전 텍스트 요소에서 텍스트 위치를 수평으로 이동
• dy
  - 이전 텍스트 요소에서 세로로 텍스트 위치를 이동
• rotate
  - 글자마다 회전을 시킬 수 있다.
  - 설정한 회전 값 개수와 글자 수가 일치하지 않으면, 별도의 값이 설정되지 않은 글자는 마지막 설정 값을 따른다.

<svg class="text01" width="200" height="150">
    <text x="30" y="30" rotate="10,8,0">svg lesson3</text>
    <style>
        .text01 text{
            font-size:2rem;
            letter-spacing:3px;
            word-spacing:10px;
            font-weight: 900;
            fill:gold;
            stroke:blueviolet;
            stroke-width:2px;
            stroke-dasharray:2px 1px;
            text-decoration:underline;
        }
    </style>
</svg>

• lengthAdjust
  - 글자 간격, 글리프 크기가 텍스트 길이에 맞게 조정되도록 설정
    ▷ spacing : 글자 간격의 공간을 채우기 위해 조정
    ▷ spacingAndGlyphs : 글자 간격뿐만 아니라 글리프 크기까지 조정
• textLength
  - 텍스트의 길이를 지정한다.
  - 문자 사이의 공백을 조정한다.

<svg width="200" height="100">
    <text x="0" y="60" text-anchor="start" dominant-baseline="middle" textLength="100%" style="font-size:2rem" lengthAdjust="spacingAndGlyphs" rotate="-10,30">svg lesson04</text>
</svg>

• text-anchor
  - text의 중심점을 정하는 요소
    ▷ start : 텍스트 문자열의 시작이 초기 현재 텍스트 위치에 있도록 정렬
    ▷ middle : 텍스트 문자열의 가운데가 현재 텍스트 위치에 있도록 정렬
    ▷ end : 텍스트의 끝이 초기 현재 텍스트 위치에 있도록 이동

<svg class="text02" width="300" height="300">
    <text x="60" y="30" text-anchor="start" style="font-size:2rem;">a</text>
    <text x="60" y="60" text-anchor="middle" style="font-size:2rem;">a</text>
    <text x="60" y="90" text-anchor="end" style="font-size:2rem;">a</text>
</svg>

• dominant-baseline
  - 상자의 text와 인라인 내용을 정렬하는 데 사용된다.
    ▷ auto : writing-mode 속성의 값에 따라 달라진다.
    ▷ middle: 글꼴의 기준선 테이블에 정의 된 기준선으로 구성
    ▷ hanging

<svg width="300" height="300">
    <text x="30" y="20" dominant-baseline="auto">auto</text>
    <text x="30" y="50" dominant-baseline="middle">middle</text>
    <text x="30" y="80" dominant-baseline="hanging">hanging</text>
</svg>

• tspan
  - SVG에서는 자동 줄 바꿈 또는 줄 바꿈을 지원하지 않는다.
  - 개별 제어 할 때 새로운 좌표 설정 대신 이전 텍스트에 상대적 위치 설정이 가능하다.
  - <tsapn> 요소의 dy 속성 값으로 각 글자 글리프의 행 높이를 조정할 수 있다.
    (이전 값에 이은 다음 값은 이전 값에 상대적으로 위치 이동한다.)

<svg width="200" height="300">
    <text x="0" y="50">
        <tspan dx="10" dy="30">svg</tspan> 
        <tspan dx="0" dy="20" textLength="90">text</tspan> 
        <tspan dx="-40" dy="20">is</tspan> 
        <tspan dx="60" dy="50">cool</tspan> 
    </text>
</svg>

• word-spacing
  - CSS 속성과 동일하다.
  - 단어 간격을 일괄적으로 조절한다.
• text-decoration
  - 텍스트 밑줄, 윗줄, 가운데 줄 처리가 가능하다.
• Path를 따라 흐르는 텍스트
  - 먼저 SVG Path 빌더를 이용해서 패스 데이터 값을 도출한다.
  - 다음으로 <defs> 요소를 사용해서 재 사용할 <path> 데이터를 등록하고 식별 가능한 ID값을 설정한다.
  - 마지막 단계로 <textPath> 요소를 사용해 콘텐츠를 감싼 후, xlink:href 속성 값으로 <path> 요소의 ID 식별자를 대입하여 참조시킨다.

<svg width="800" height="600" viewbox="0 0 800 600">
<style>
  .text_path_wrap{
    fill:#448aff;
    font-family:'Leckerli One', cursive;
    font-size:3rem;
  }
</style>
<defs>
  <path id="text-line" d="M100,300 Q200,200 350,300 Q550,450 700,300" />
</defs>
<text class="text_path_wrap" x="20" y="60%" >
  <textPath xlink:href="#text-line">
    SVG text can use the textPath element and 
    path data to draw text that flows along the path.
  </textPath>
</text>
</svg>