본문 바로가기
HTML5/SVG

SVG Ellipse

by Jundol 2015. 6. 8.

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

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




SVG Ellipse - <ellipse>

<ellipse>태그는 타원을 만들때 사용.

타원은 엄밀히 말하면 원에 가깝다. 둘의 다른점은 타원은 x, y 반지름이 다르다. 원은 x,y 반지름이 같다. 



예제 1


Sorry, your browser does not support inline SVG.

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
Sorry, your browser does not support inline SVG.

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

Sorry, your browser does not support inline SVG.

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

'HTML5 > SVG' 카테고리의 다른 글

SVG Polygon  (4) 2015.06.08
SVG Line  (6) 2015.06.08
SVG Circle  (182) 2015.06.08
SVG rect  (66) 2015.06.08
SVG in HTML  (263) 2015.06.08

댓글