SVG <타원>
SVG 타원 - <타원>
<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>