205 lines
5.6 KiB
Markdown
205 lines
5.6 KiB
Markdown
SVG의 모든 요소와 그 설명을 표로 정리한 후, 각 요소별 속성을 속성과 설명이 포함된 표로 정리하겠습니다.
|
|
|
|
---
|
|
|
|
## 1. SVG 요소 목록
|
|
|
|
| 요소 | 설명 |
|
|
|------|------|
|
|
| `<svg>` | SVG 그래픽을 정의하는 루트 요소 |
|
|
| `<g>` | 여러 요소를 그룹화하는 컨테이너 |
|
|
| `<defs>` | 재사용 가능한 요소(예: 패턴, 필터)를 정의하는 요소 |
|
|
| `<symbol>` | 독립적인 그래픽을 정의하고 `<use>` 요소로 재사용할 수 있도록 함 |
|
|
| `<use>` | `<symbol>`이나 다른 요소를 참조하여 재사용하는 요소 |
|
|
| `<rect>` | 사각형을 그림 |
|
|
| `<circle>` | 원을 그림 |
|
|
| `<ellipse>` | 타원을 그림 |
|
|
| `<line>` | 한 점에서 다른 점까지 선을 그림 |
|
|
| `<polyline>` | 여러 선을 연결한 열린 경로를 그림 |
|
|
| `<polygon>` | 여러 선을 연결한 닫힌 도형을 그림 |
|
|
| `<path>` | 복잡한 곡선 및 선을 그릴 수 있는 자유로운 경로를 정의 |
|
|
| `<text>` | 텍스트를 그림 |
|
|
| `<tspan>` | `<text>` 내에서 텍스트의 위치나 스타일을 변경하는 요소 |
|
|
| `<textPath>` | 경로를 따라 텍스트를 배치하는 요소 |
|
|
| `<image>` | 외부 이미지를 SVG 내에 포함 |
|
|
| `<clipPath>` | 일부 영역만 표시되도록 마스크 역할을 하는 요소 |
|
|
| `<mask>` | 반투명한 마스킹 효과를 줄 때 사용 |
|
|
| `<pattern>` | 반복되는 패턴을 정의 |
|
|
| `<linearGradient>` | 선형 그라디언트를 정의 |
|
|
| `<radialGradient>` | 방사형 그라디언트를 정의 |
|
|
| `<stop>` | 그라디언트의 색상 지점을 정의 |
|
|
| `<filter>` | 블러, 그림자 등의 그래픽 효과를 정의 |
|
|
| `<feGaussianBlur>` | 블러 효과를 적용 |
|
|
| `<feOffset>` | 요소의 위치를 이동 |
|
|
| `<feColorMatrix>` | 색상을 변환 |
|
|
| `<animate>` | 속성에 애니메이션 효과를 추가 |
|
|
| `<animateTransform>` | 변형(이동, 회전, 크기 변경) 애니메이션을 적용 |
|
|
| `<set>` | 특정 속성을 일정 시간 동안 변경 |
|
|
| `<foreignObject>` | SVG 내부에서 HTML 요소를 사용할 수 있도록 함 |
|
|
|
|
---
|
|
|
|
## 2. 요소별 속성 목록
|
|
|
|
### 2.1 `<svg>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `width` | SVG의 너비 |
|
|
| `height` | SVG의 높이 |
|
|
| `viewBox` | 좌표 시스템을 정의하는 영역 (`min-x min-y width height`) |
|
|
| `preserveAspectRatio` | 화면 크기에 따른 비율 조정 방식 |
|
|
|
|
---
|
|
|
|
### 2.2 `<g>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `transform` | 그룹에 변환 효과(이동, 회전 등) 적용 |
|
|
| `fill` | 그룹 내 요소의 기본 색상 지정 |
|
|
| `stroke` | 그룹 내 요소의 테두리 색상 지정 |
|
|
|
|
---
|
|
|
|
### 2.3 `<rect>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `x` | 사각형의 좌측 상단 x 좌표 |
|
|
| `y` | 사각형의 좌측 상단 y 좌표 |
|
|
| `width` | 사각형의 너비 |
|
|
| `height` | 사각형의 높이 |
|
|
| `rx` | 사각형 모서리의 x 방향 둥근 정도 |
|
|
| `ry` | 사각형 모서리의 y 방향 둥근 정도 |
|
|
|
|
---
|
|
|
|
### 2.4 `<circle>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `cx` | 원의 중심 x 좌표 |
|
|
| `cy` | 원의 중심 y 좌표 |
|
|
| `r` | 원의 반지름 |
|
|
|
|
---
|
|
|
|
### 2.5 `<ellipse>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `cx` | 타원의 중심 x 좌표 |
|
|
| `cy` | 타원의 중심 y 좌표 |
|
|
| `rx` | x 방향 반지름 |
|
|
| `ry` | y 방향 반지름 |
|
|
|
|
---
|
|
|
|
### 2.6 `<line>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `x1` | 선의 시작 x 좌표 |
|
|
| `y1` | 선의 시작 y 좌표 |
|
|
| `x2` | 선의 끝 x 좌표 |
|
|
| `y2` | 선의 끝 y 좌표 |
|
|
|
|
---
|
|
|
|
### 2.7 `<polyline>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `points` | 여러 점을 정의 (`x1,y1 x2,y2 ...`) |
|
|
|
|
---
|
|
|
|
### 2.8 `<polygon>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `points` | 다각형을 구성하는 점 좌표 리스트 |
|
|
|
|
---
|
|
|
|
### 2.9 `<path>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `d` | 경로 데이터 (M, L, C, Q 등 사용) |
|
|
| `fill-rule` | 내부 영역 채우기 규칙 (`nonzero` 또는 `evenodd`) |
|
|
|
|
---
|
|
|
|
### 2.10 `<text>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `x` | 텍스트의 시작 x 좌표 |
|
|
| `y` | 텍스트의 시작 y 좌표 |
|
|
| `dx` | x 방향 오프셋 |
|
|
| `dy` | y 방향 오프셋 |
|
|
| `text-anchor` | 텍스트 정렬 (`start`, `middle`, `end`) |
|
|
|
|
---
|
|
|
|
### 2.11 `<image>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `href` | 이미지 경로 (SVG 2.0부터는 `xlink:href` 대신 사용) |
|
|
| `x` | 이미지의 x 좌표 |
|
|
| `y` | 이미지의 y 좌표 |
|
|
| `width` | 이미지 너비 |
|
|
| `height` | 이미지 높이 |
|
|
|
|
---
|
|
|
|
### 2.12 `<clipPath>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `clipPathUnits` | 좌표 시스템 단위 (`userSpaceOnUse` 또는 `objectBoundingBox`) |
|
|
|
|
---
|
|
|
|
### 2.13 `<mask>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `maskUnits` | 좌표 단위 (`userSpaceOnUse` 또는 `objectBoundingBox`) |
|
|
| `maskContentUnits` | 마스크 내용의 좌표 단위 |
|
|
|
|
---
|
|
|
|
### 2.14 `<linearGradient>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `x1`, `y1` | 그라디언트 시작점 좌표 |
|
|
| `x2`, `y2` | 그라디언트 끝점 좌표 |
|
|
|
|
---
|
|
|
|
### 2.15 `<radialGradient>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `cx`, `cy` | 방사형 그라디언트 중심 좌표 |
|
|
| `r` | 반지름 |
|
|
|
|
---
|
|
|
|
### 2.16 `<animate>` 요소 속성
|
|
|
|
| 속성 | 설명 |
|
|
|------|------|
|
|
| `attributeName` | 애니메이션할 속성 이름 |
|
|
| `from` | 애니메이션 시작 값 |
|
|
| `to` | 애니메이션 종료 값 |
|
|
| `dur` | 애니메이션 지속 시간 |
|
|
|
|
---
|
|
|
|
이 외에도 여러 속성이 있지만, 주요한 요소와 속성을 정리했습니다. 필요한 경우 추가 정보를 요청해 주세요! |