본문 바로가기

Webstoryboy

Category

Explanation

SVG

[SVG] <circle>

<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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<rect> 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN SVG
  • Scalable Vector Graphics (SVG)2

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기