<circle>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

<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

円の半径。0 以下の値は円の描画が無効となります。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション:

pathLength

円の円周の長さの合計をユーザー単位で指定します。 値の型: <number> ; 既定値: なし; アニメーション:

メモ: SVG2 から cx, cy, r はジオメトリープロパティであり、これらの属性はその要素の CSS プロパティとしても使用することができるということを意味しています。

使用可能な場所

カテゴリー基本シェイプ要素、グラフィック要素、図形要素
許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# CircleElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
circle
cx
cy
fill
context-fill value
r
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報