5.5 KiB
5.5 KiB
SVG
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 |
애니메이션 지속 시간 |
이 외에도 여러 속성이 있지만, 주요한 요소와 속성을 정리했습니다. 필요한 경우 추가 정보를 요청해 주세요!