<ellipse>
Базовая поддержка Широко доступно *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
* Поддержка некоторых частей этой функции может различаться.
Элемент <ellipse> SVG — это базовая фигура SVG, используемая для создания эллипсов на основе координат центра и радиусов по осям x и y.
Примечание: для эллипса нельзя задать точную ориентацию (например, если нужно нарисовать эллипс, наклонённый под углом 45 градусов), но его можно повернуть с помощью атрибута transform.
Контекст использования
| Категории | Элемент базовой фигуры, графический элемент, элемент фигуры |
|---|---|
| Допустимое содержимое | Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы |
Атрибуты
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 для данного элемента.
Пример
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg>
Спецификации
| Спецификация |
|---|
| Scalable Vector Graphics (SVG) 2> # EllipseElement> |
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
ellipse |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
cx |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
cy |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
fill |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 3 | 1.0 | 4.4 | 3 |
rx |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
ry |
1 | 12 | 1.5 | 8 | 3 | 18 | 4 | 14 | 3 | 1.0 | 3 | 3 |
systemLanguage |
1 | 12 | 12 | 8 | 3 | 18 | 14 | 14 | 3 | 1.0 | 3 | 3 |
См. также
- Другие базовые фигуры SVG:
<circle>,<line>,<polygon>,<polyline>,<rect>
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/ellipse
