<ellipse>

<ellipse> 요소는 SVG의 기본 모양 중 하나로, 중심좌표와 x축, y축 반지름을 이용하여 타원을 생성합니다.

참고: 타원은 정확한 방향을 특정할 수 없습니다. (예를 들어, 45도 기울어진 타원을 그리려고 할 경우) 하지만 transform (en-US)속성을 사용함으로써 회전할 수는 있습니다.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

Attributes

cx

The x position of the ellipse. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

cy (en-US)

The y position of the ellipse. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

rx (en-US)

The radius of the ellipse on the x axis. Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes

ry (en-US)

The radius of the ellipse on the y axis. Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes

pathLength (en-US)

This attribute lets specify the total length for the path, in user units. Value type: <number> ; Default value: none; Animatable: yes

참고: Starting with SVG2 cx, cy, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

Global attributes

Usage notes

CategoriesBasic shape element, Graphics element, Shape element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# EllipseElement

Browser compatibility

BCD tables only load in the browser

See also