<circle>
<circle> 요소는 원을 그리는 SVG 기본 모양입니다. 중심점과 반지름을 기준으로 원을 표현합니다.
<circle>
<circle> 요소는 원을 그립니다.
정의(Definition)
- <circle> 요소는 SVG 기본 모양으로 중심점과 반지름을 기준으로 원을 그리는데 사용됩니다.
속성(Property)
| 속성 | 설명 |
|---|---|
| cx | 원 중심의 x축 좌표 값을 설정합니다. |
| cy | 원 중심의 y축 좌표 값을 설정합니다. |
| r | 원의 반지름 값을 설정합니다. |
1. 사각형 
SVG를 이용한 사각형입니다.
Sample1
CSS
.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.circle1 {
fill: #f48fb1; cx: 80; cy: 80; r: 60;
}
.circle2 {
fill: #f48fb1; cx: 80; cy: 80; r: 60;
stroke: #880e4f;
stroke-width: 5;
}TOTAL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG</title>
<style>
.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.circle1 {
fill: #f48fb1; cx: 80; cy: 80; r: 60;
}
.circle2 {
fill: #f48fb1; cx: 80; cy: 80; r: 60;
stroke: #880e4f;
stroke-width: 5;
}
</style>
</head>
<body>
<div class="svgBox">
<svg class="svg">
<circle class="circle1"></circle>
</svg>
<svg class="svg">
<circle class="circle2"></circle>
</svg>
</div>
</body>
</html>호환성(Compatibility)
더보기
caniuse.com
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <rect> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
참고(Reference)
- MDN SVG
- Scalable Vector Graphics (SVG)2
