SVG Ellipse

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

SVG Ellipse - <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 요소와 cy 요소는 각각 타원의 x,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>

출처 W3SCHOOL.COM - SVG - ELLIPSE

http://www.w3schools.com/svg/svg_ellipse.asp