[SVG] SVG 코드에 텍스트를 넣기

SVG 코드에 텍스트를 넣기

SVG 코드에서 텍스트 색상을 변경하려면, 텍스트 요소(<text>)를 추가하고 CSS를 이용하여 스타일을 적용하면 됩니다. 앞에서 제공한 원 예제에 빨간색 텍스트 'SVG'를 추가하는 방법은 다음과 같습니다.

1. <text> 태그를 사용하여 텍스트를 추가합니다.
2. fill 속성을 사용하여 텍스트의 색상을 설정합니다.
3. x와 y 속성을 사용하여 텍스트의 위치를 조정합니다.

예제 코드는 다음과 같습니다.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <text x="30" y="55" fill="red">SVG</text>
</svg>

이 코드는 원래의 원 그래픽에 빨간색으로 'SVG'라는 텍스트를 추가합니다. x="30"와 y="55"는 텍스트의 위치를 SVG 캔버스 내에서 정합니다.

caption: text 넣기

이 위치는 텍스트의 시작점을 나타내며, 필요에 따라 조정할 수 있습니다. fill="red"는 텍스트의 색상을 빨간색으로 지정합니다.

텍스트 꾸미기

SVG 내에서 텍스트의 크기를 키우고 중앙에 정렬하려면, 텍스트 요소(<text>)에 font-size 속성을 추가하고, 텍스트의 위치를 조정하여 중앙에 오도록 해야 합니다. 또한, 텍스트가 정확히 중앙에 위치하도록 하기 위해서는 text-anchor 속성을 'middle'로 설정하는 것이 좋습니다. 이렇게 하면 텍스트의 중앙이 지정된 x 좌표에 위치하게 됩니다.

 

다음은 수정된 예제 코드입니다:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <text x="50" y="55" fill="red" font-size="20" text-anchor="middle">SVG</text>
</svg>

caption: 텍스트 크기와 위치 수정

이 코드에서는 다음과 같은 변경 사항을 적용했습니다:

• font-size="20": 텍스트의 크기를 20으로 설정하여 확대합니다.
• x="50"와 text-anchor="middle": 텍스트가 SVG 캔버스의 가로축 중앙에 오도록 합니다.
• y="55": 텍스트의 세로 위치를 조정합니다. 이 값은 텍스트의 크기와 디자인에 따라 조정할 수 있습니다.

caption: 텍스트가 추가된 SVG

 

이 코드를 사용하면, 더 큰 빨간색 텍스트 'SVG'가 원의 중앙에 위치하게 됩니다.