[CSS] SVG 태그 <circle> <ellipese> 태그 / 원형태그 / 원형만들기 / 타원

 

 

 

 

<svg height="210" width="500">
     <circle cx="100" cy="100" r="50" style="fill:lime;stroke:purple;stroke-width:3" /> 
</svg>

 

 

cx와 cy 속성은 원의 중심의 x와 y 좌표를 정의합니다.

cx와 cy를 생략한다면 기본 (0,0)로 설정됩니다.

r은 원의 반지름을 정의합니다.

 

 

 

 

 

 

<svg height="210" width="500">
     <ellipse cx="200" cy="100" rx="100" ry="50" style="fill:#dddddd;stroke:purple;stroke-width:3" />
</svg>

 

 

cx와 cy는 타원 중심의 좌표를 정의 (타원의 중심축 X,Y 좌표)

rx는 수평 반지름을 정의 (타원의 넓이)

ry는 수직 반지름을 정의 (타원의 높이)