<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.
例
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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- その他の SVG 基本図形:
<ellipse>
,<line>
,<polygon>
,<polyline>
,<rect>