HTML 그래픽 – 타원

타원

SVG 타원 – <ellipse>

<ellipse> 요소는 타원을 만드는 데 사용된다.

타원은 원과 밀접한 관련이 있다.
차이점은 타원은 x축과 y축 반지름이 서로 다른 반면, 원은 x축과 y축 반지름이 같다는 것이다.

<ellipse> 요소에는 타원의 위치와 크기를 설정하는 네 가지 기본 속성이 있다.

SVG 타원

<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">

  <ellipse rx="100" ry="50" cx="120" cy="80"

  style="fill:yellow;stroke:green;stroke-width:3" />

</svg>

• rx 속성은 x (수평) 반지름을 정의한다.
• ry 속성은 y (수직) 반지름을 정의한다.
• cx 속성은 타원의 x축 중심을 정의한다.
• cy 속성은 타원의 y축 중심을 정의한다.

세 개의 타원

<svg height="150" width="500" xmlns="http://www.w3.org/2000/svg">

  <ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />

  <ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />

  <ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow" />

</svg>

두 개의 타원

<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">

  <ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow" />

  <ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />

</svg>