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