SVG <ellipse>

<ellipse> 태그는 타원을 생성하는 데 사용됩니다.

<ellipse> 태그

<ellipse> 태그는 타원을 생성하는 데 사용됩니다. 타원은 원과 매우 유사하지만, 원과의 차이는 타원은 다른 x 및 y 반지름을 가지고 있으며, 원의 x 및 y 반지름은 같다는 점입니다.

아래의 코드를 메모장에 복사하고, 파일을 "ellipse1.svg"로 저장하세요. 이 파일을 웹 디렉토리에 넣으세요：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"> 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1">
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

코드 설명：

  • cx 속성은 원점의 x 좌표를 정의합니다
  • cy 속성은 원점의 y 좌표를 정의합니다
  • rx 속성은 수평 반지름을 정의합니다
  • ry 속성은 수직 반지름을 정의합니다

예제 보기

아래의 예제는 세 개의 쌓이는 타원을 생성합니다：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"> 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1">
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
</svg>

예제 보기

아래 예제는 두 개의 원형(하나는 노란색이고 하나는 흰색)을 조합한 것입니다:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"> 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1">
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>

예제 보기