<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.

<circle> はSVG の要素で、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 on2025年10月30日 byMDN contributors.