<circle>

Базовый уровень Широко поддерживается *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она поддерживается браузерами с ⁨июля 2015 г.⁩.

* Некоторые части этой функции могут иметь разный уровень поддержки.

Элемент <circle> SVG представляет собой базовую фигуру SVG, используемую для рисования окружностей по заданным центральной точке и радиусу.

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

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

Атрибуты

cx: Координата центра окружности по оси X. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да
cy: Координата центра окружности по оси Y. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да
r: Радиус окружности. Значение, меньшее или равное нулю, отключает отображение окружности. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да
pathLength: Полная длина окружности в пользовательских единицах. Тип значения: <number>; Значение по умолчанию: нет; Анимируемый: да

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

Интерфейс DOM

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

Пример

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # CircleElement>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`circle`	1	12	1.5	8	3	18	4	14	2	1.0	3	2
`cx`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`cy`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`fill`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2
`r`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`systemLanguage`	1	12	12	8	3	18	14	14	2	1.0	3	2

См. также

Другие базовые фигуры SVG: <ellipse>, <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/circle