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>