<ellipse>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Элемент ellipse — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.

Примечание: Сам по себе элемент ellipse не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45**°**), однако его можно повернуть с помощью атрибута transform.

Пример

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

Атрибуты

cx

Позиция эллипса по x. Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да

cy

Позиция эллипса по y. Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да

rx

Радиус эллипса по x. Тип значения: auto|<length>|<percentage> ;Значение по умолчанию: auto; Можно анимировать: да

ry

Радиус эллипса по y. Тип значения: auto|<length>|<percentage> ; Значение по умолчанию: auto; Можно анимировать: да

pathLength

Этот атрибут позволяет установить длину всего пути. Тип значения: <number> ; Значение по умолчанию: нет; Можно анимировать: да

Примечание: Начиная с SVG2, cx, cy, rx и ry это Геометрические свойства. Это означает, что они могут быть использованы как CSS-свойства элемента.

Контекст использования

КатегорииЭлементы базовых фигур, Графические элементы, Элемент фигуры
Разрешённый контентЛюбое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания

Спецификации

Specification
Scalable Vector Graphics (SVG) 2
# EllipseElement

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также