<circle>

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<circle> SVG 元素是一个 SVG 基本形状，用于根据中心点和半径绘制圆形。

使用语境

分类	基本形状元素、图形元素、形状元素
允许内容	可包含任意数量、任意顺序的下列元素动画元素描述性元素

cx: 圆心在 x 轴上的坐标。值类型：<length> | <percentage>；默认值：0；可动画：是
cy: 圆心在 y 轴上的坐标。值类型：<length> | <percentage>；默认值：0；可动画：是
r: 圆的半径。小于或等于零的值将禁用圆的渲染。值类型：<length> | <percentage>；默认值：0；可动画：是
路径长度: 圆周的总长度，以用户单位表示。值类型：<number>；默认值：无；可动画：是

注意：从 SVG2 开始，cx、cy 和 r 是几何属性，这意味着这些属性也可以用作该元素的 CSS 属性。

此元素实现了 SVGCircleElement 接口。

html,
body,
svg {
  height: 100%;
}

html

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

规范
Scalable Vector Graphics (SVG) 2 # CircleElement

此页面最后修改于 2025年6月6日，由 MDN 贡献者修改。