154 lines
6.3 KiB
Markdown
154 lines
6.3 KiB
Markdown
### SVG의 `<text>` 요소와 관련 기능
|
|
|
|
SVG에서 `<text>` 요소는 텍스트를 그래픽으로 렌더링하는 데 사용됩니다. 단순히 텍스트를 표시하는 것을 넘어, 스타일링, 위치 조정, 경로 따라 배치 등 다양한 기능을 제공합니다. 아래에서는 `<text>` 요소의 주요 속성, `<tspan>`과 `<textPath>`의 역할, `<symbol>`과 `<use>`를 활용한 아이콘 제작 방법, 그리고 `<foreignObject>`에 대해 설명합니다.
|
|
|
|
---
|
|
|
|
### `<text>` 요소와 주요 속성
|
|
|
|
`<text>`는 텍스트를 SVG 캔버스에 추가하며, 위치와 스타일을 속성으로 정의합니다.
|
|
|
|
#### 기본 예시
|
|
```xml
|
|
<svg width="200" height="100">
|
|
<text x="10" y="50" fill="black">Hello, SVG!</text>
|
|
</svg>
|
|
```
|
|
|
|
#### 주요 속성 정리
|
|
| 속성 | 설명 | 예시 값 |
|
|
|---------------------|--------------------------------------------------------------------------------------|--------------------------|
|
|
| `x` | 텍스트의 x축 시작 위치. | `10` |
|
|
| `y` | 텍스트의 y축 시작 위치(기본적으로 baseline 기준). | `50` |
|
|
| `dx`, `dy` | 텍스트 또는 문자별로 상대적 위치 조정. | `5`, `-10` |
|
|
| `fill` | 텍스트 채우기 색상. | `red`, `#ff0000` |
|
|
| `stroke` | 텍스트 외곽선 색상. | `black` |
|
|
| `font-size` | 글꼴 크기. | `16`, `1em` |
|
|
| `font-family` | 글꼴 종류. | `Arial`, `sans-serif` |
|
|
| `text-anchor` | 텍스트 정렬(시작점 기준). | `start`, `middle`, `end`|
|
|
| `dominant-baseline` | 텍스트의 수직 정렬 기준. | `auto`, `middle`, `hanging` |
|
|
| `transform` | 회전, 이동 등 변환 적용. | `rotate(45 50 50)` |
|
|
|
|
#### 예시: 스타일링된 텍스트
|
|
```xml
|
|
<svg width="200" height="100">
|
|
<text x="100" y="50" font-size="20" fill="blue" text-anchor="middle" transform="rotate(-45 100 50)">
|
|
Rotated Text
|
|
</text>
|
|
</svg>
|
|
```
|
|
- 가운데 정렬된 파란색 텍스트를 45도 회전.
|
|
|
|
---
|
|
|
|
### `<tspan>`: 텍스트 일부 스타일링
|
|
|
|
`<tspan>`은 `<text>` 내부에서 특정 텍스트 부분에 스타일을 적용하거나 위치를 조정할 때 사용됩니다.
|
|
|
|
#### 예시
|
|
```xml
|
|
<svg width="200" height="100">
|
|
<text x="10" y="50" font-size="16">
|
|
Hello <tspan fill="red" font-weight="bold">SVG</tspan> World!
|
|
</text>
|
|
</svg>
|
|
```
|
|
- "SVG"만 빨간색으로 굵게 표시.
|
|
|
|
#### 주요 특징
|
|
- `dx`, `dy`로 위치 미세 조정 가능.
|
|
- 여러 줄 텍스트를 만들 때 유용:
|
|
```xml
|
|
<svg width="200" height="100">
|
|
<text x="10" y="20" font-size="16">
|
|
<tspan x="10" dy="0">First Line</tspan>
|
|
<tspan x="10" dy="20">Second Line</tspan>
|
|
</text>
|
|
</svg>
|
|
```
|
|
|
|
---
|
|
|
|
### `<textPath>`: 경로를 따른 텍스트
|
|
|
|
`<textPath>`은 텍스트를 `<path>`로 정의된 경로를 따라 배치합니다. `href` 속성으로 경로를 참조합니다.
|
|
|
|
#### 예시
|
|
```xml
|
|
<svg width="200" height="200">
|
|
<defs>
|
|
<path id="curve" d="M10 80 Q100 20 190 80" />
|
|
</defs>
|
|
<text font-size="16">
|
|
<textPath href="#curve">Curved Text</textPath>
|
|
</text>
|
|
</svg>
|
|
```
|
|
- 텍스트가 곡선을 따라 배치됨.
|
|
|
|
#### 주요 속성
|
|
- `startOffset`: 경로 시작점에서의 오프셋(예: `50%`로 가운데 정렬).
|
|
- `text-anchor`: 텍스트 정렬.
|
|
|
|
---
|
|
|
|
### `<symbol>`과 `<use>`를 활용한 아이콘 제작
|
|
|
|
`<symbol>`은 재사용 가능한 그래픽 템플릿을 정의하며, `<use>`로 이를 인스턴스화합니다. 아이콘 제작에 이상적입니다.
|
|
|
|
#### 제작 방법
|
|
1. `<symbol>`로 아이콘 정의:
|
|
```xml
|
|
<svg>
|
|
<defs>
|
|
<symbol id="star" viewBox="0 0 100 100">
|
|
<polygon points="50,10 60,40 90,40 65,60 75,90 50,70 25,90 35,60 10,40 40,40" fill="gold"/>
|
|
</symbol>
|
|
</defs>
|
|
</svg>
|
|
```
|
|
- `viewBox`로 내부 좌표계를 설정.
|
|
|
|
2. `<use>`로 아이콘 재사용:
|
|
```xml
|
|
<svg width="200" height="200">
|
|
<use href="#star" x="10" y="10" width="50" height="50"/>
|
|
<use href="#star" x="100" y="100" width="30" height="30" fill="red"/>
|
|
</svg>
|
|
```
|
|
- 위치와 크기, 색상을 조정해 여러 번 사용.
|
|
|
|
#### 장점
|
|
- 파일 크기 절약: 동일한 그래픽을 여러 번 재사용.
|
|
- 스타일 커스터마이징: 각 `<use>`마다 다른 스타일 적용 가능.
|
|
|
|
---
|
|
|
|
### `<foreignObject>`: 외부 콘텐츠 삽입
|
|
|
|
`<foreignObject>`는 SVG 안에 HTML, 이미지 등 외부 콘텐츠를 포함할 수 있게 합니다. SVG가 아닌 다른 네임스페이스의 요소를 렌더링하는 데 사용됩니다.
|
|
|
|
#### 예시
|
|
```xml
|
|
<svg width="200" height="200">
|
|
<foreignObject x="10" y="10" width="180" height="180">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue; font-size: 16px;">
|
|
This is <b>HTML</b> inside SVG!
|
|
</div>
|
|
</foreignObject>
|
|
</svg>
|
|
```
|
|
- SVG 안에 HTML `<div>`를 삽입.
|
|
|
|
#### 주요 속성
|
|
- `x`, `y`, `width`, `height`: 삽입 영역 정의.
|
|
- 제한: 브라우저 호환성에 따라 렌더링이 달라질 수 있음.
|
|
|
|
#### 활용
|
|
- SVG와 HTML의 장점을 결합(예: 버튼, 입력 폼 삽입).
|
|
- 복잡한 레이아웃이 필요한 데이터 시각화.
|
|
|
|
---
|
|
|
|
### 결론
|
|
SVG의 `<text>`는 위치와 스타일링을 자유롭게 조정할 수 있으며, `<tspan>`과 `<textPath>`로 세부 조정과 창의적 배치가 가능합니다. `<symbol>`과 `<use>`는 아이콘 시스템을 효율적으로 관리하는 데 유용하고, `<foreignObject>`는 SVG의 한계를 넘어 외부 콘텐츠를 통합할 수 있는 강력한 도구입니다. 이러한 기능들을 활용하면 단순한 텍스트나 아이콘을 넘어 인터랙티브하고 복잡한 그래픽을 구현할 수 있습니다. |