<circle>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

SVG 元素 <circle> 是用于根据圆心坐标和半径绘制圆形的 SVG 基本形状。

使用上下文

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

cx: 圆心的 x 轴坐标。值类型：<length> | <percentage>；默认值：0；动画性：是
cy: 圆心的 y 轴坐标。值类型：<length> | <percentage>；默认值：0；动画性：是
r: 圆的半径。若值小于或等于 0，则圆形不会被渲染。值类型：<length> | <percentage>；默认值：0；动画性：是
pathLength: 圆周的总长度，单位为用户单位。值类型：<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>

Specification
Scalable Vector Graphics (SVG) 2 # CircleElement

This page was last modified on ⁨2025年10月11日⁩ by MDN contributors.