[SVG] <ellipse>

<ellipse>

<ellipse> SVG 기본 모양으로 중심 좌표 x와 y를 기반으로 타원을 만드는 데 사용합니다.

<ellipse>

<ellipse> 요소는 타원을 그립니다.

정의(Definition)

<ellipse> 요소는 타원을 만들 때 사용합니다.
<ellipse> 요소는 중심 좌표 x와 y를 기반으로 타원을 만듭니다.

속성(Property)

속성	설명
cx	타원 중심 좌표의 x축 값을 설정합니다.
cy	타원 중심 좌표의 y축 값을 설정합니다.
rx	타원의 x축 반지름 값을 설정합니다.
ry	타원의 y축 반지름 값을 설정합니다.

1. 타원형

SVG를 이용한 타원형입니다.

Sample1

CSS

.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.ellipse1 {
    fill: #f48fb1;
    cx: 80; cy: 80; rx: 60; ry: 50;
}
.ellipse2 {
    fill: #f48fb1; 
    cx: 80; cy: 80; rx: 50; ry: 60;
}
.ellipse3 {
    fill: #f48fb1; 
    cx: 80; cy: 80; rx: 60; ry: 30;
}
.ellipse4 {
    fill: #f48fb1; 
    cx: 80; cy: 80; rx: 30; ry: 60;
}
.ellipse5 {
    fill: #f48fb1; 
    cx: 80; cy: 80; rx: 50; ry: 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;}
    .ellipse1 {
        fill: #f48fb1;
        cx: 80; cy: 80; rx: 60; ry: 50;
    }
    .ellipse2 {
        fill: #f48fb1; 
        cx: 80; cy: 80; rx: 50; ry: 60;
    }
    .ellipse3 {
        fill: #f48fb1; 
        cx: 80; cy: 80; rx: 60; ry: 30;
    }
    .ellipse4 {
        fill: #f48fb1; 
        cx: 80; cy: 80; rx: 30; ry: 60;
    }
    .ellipse5 {
        fill: #f48fb1; 
        cx: 80; cy: 80; rx: 50; ry: 60;
        stroke: #880e4f;
        stroke-width: 5;
    }
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <ellipse class="ellipse1"></ellipse>
        </svg>
        <svg class="svg">
            <ellipse class="ellipse2"></ellipse>
        </svg>
        <svg class="svg">
            <ellipse class="ellipse3"></ellipse>
        </svg>
        <svg class="svg">
            <ellipse class="ellipse4"></ellipse>
        </svg>
        <svg class="svg">
            <ellipse class="ellipse5"></ellipse>
        </svg>
    </div>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

						6	7	8	9	10	11
<ellipse>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
cx	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
cy	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
rx	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
ry	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능