<circle>

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

Пример

html

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

Атрибуты

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

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

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

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

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

Спецификация
Scalable Vector Graphics (SVG) 2 # CircleElement

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

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

См. также

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