SVG <ellipse>

SVG 원형 - <ellipse>

<ellipse> 요소는 원형을 생성하는 데 사용됩니다.

원형은 원과 매우 관련이 있습니다. 차이점은 원형의 x와 y 반지름이 서로 다르며, 원은 x와 y 반지름이 같다는 점입니다:

예제 1

다음 예제는 원형을 생성합니다:

이 SVG 코드는 다음과 같습니다:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

직접 테스트해 보세요

코드 설명:

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

예제 2

다음 예제는 서로 겹치는 세 개의 원형을 생성합니다:

이 SVG 코드는 다음과 같습니다:

<svg height="150" width="500">
  <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>

직접 테스트해 보세요

예제 3

다음 예제는 두 개의 원형(하나는 노랑, 하나는 하얀색)을 조합한 것입니다:

이 SVG 코드는 다음과 같습니다:

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

직접 테스트해 보세요