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

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

<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, cxcyrx и ry это Геометрические свойства. Это означает, что они могут быть использованы как CSS свойства элемента.

Глобальные Атрибуты

Основные атрибуты
Самые важные: id, tabindex
Атрибуты стиля
class, style
Условные атрибуты
Самые важные: requiredExtensions, systemLanguage
Аттрибуты событий
Глобальные атрибуты событийАтрибуты графических событий
Атрибуты представления
Самые важные: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA-Атрибуты
aria-activedescendantaria-atomicaria-autocompletearia-busyaria-checkedaria-colcountaria-colindexaria-colspanaria-controlsaria-currentaria-describedbyaria-detailsaria-disabledaria-dropeffectaria-errormessagearia-expandedaria-flowto,aria-grabbedaria-haspopuparia-hiddenaria-invalidaria-keyshortcutsaria-label,aria-labelledbyaria-levelaria-livearia-modalaria-multilinearia-multiselectable,aria-orientationaria-ownsaria-placeholderaria-posinsetaria-pressedaria-readonly,aria-relevantaria-requiredaria-roledescriptionaria-rowcountaria-rowindexaria-rowspanaria-selectedaria-setsizearia-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetextrole

Информация

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

Пример

» ellipse.svg

Интерфейс DOM

Этот элемент реализует интерфейс SVGEllipseElement.

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

Спецификация Состояние Комментарий
Scalable Vector Graphics (SVG) 2
Определение '<ellipse>' в этой спецификации.
Кандидат в рекомендации
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<ellipse>' в этой спецификации.
Рекомендация Исходное определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
ellipseChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android ?
cxChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android ?
cyChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android ?
rxChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android ?
ryChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 8Safari Полная поддержка 3WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

Смотри также

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: ialexi-bl, boxa6, mdnwebdocs-bot, wbamberg, Sebastianz, littleleshy
Обновлялась последний раз: ialexi-bl,