circle

<circle> SVG 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。

使用可能な場所

カテゴリー	基本シェイプ要素 、 グラフィックス要素 、 図形要素
許可された内容	任意の数、任意の順で以下の要素を配置可能： アニメーション要素 説明的要素

属性値

グローバル属性

• 条件処理属性
• コア属性
• グラフィカルイベント属性
• プレゼンテーション属性
• class
• style
• externalResourcesRequired
• transform

専用属性

• cx
• cy
• r

DOM インターフェイス

この要素は SVGCircleElement インターフェイスを実装しています。

例

SVG

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

出力

仕様

仕様書	策定状況	備考
Scalable Vector Graphics (SVG) 2 <circle> の定義	勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <circle> の定義	勧告	初期定義

ブラウザ実装状況

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
circle	Chrome 完全対応 1	Edge 完全対応 あり	Firefox 完全対応 1.5	IE 完全対応 9	Opera 完全対応 8	Safari 完全対応 3.1	WebView Android 完全対応 3	Chrome Android 完全対応 あり	Firefox Android 完全対応 4	Opera Android 完全対応 あり	Safari iOS 完全対応 3.1	Samsung Internet Android ?
cx	Chrome 完全対応 あり	Edge 完全対応 あり	Firefox 完全対応 あり	IE 完全対応 9	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android 完全対応 あり	Chrome Android 完全対応 あり	Firefox Android 完全対応 あり	Opera Android 完全対応 あり	Safari iOS 完全対応 あり	Samsung Internet Android ?
cy	Chrome 完全対応 あり	Edge 完全対応 あり	Firefox 完全対応 あり	IE 完全対応 9	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android 完全対応 あり	Chrome Android 完全対応 あり	Firefox Android 完全対応 あり	Opera Android 完全対応 あり	Safari iOS 完全対応 あり	Samsung Internet Android ?
r	Chrome 完全対応 あり	Edge 完全対応 あり	Firefox 完全対応 あり	IE 完全対応 9	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android 完全対応 あり	Chrome Android 完全対応 あり	Firefox Android 完全対応 あり	Opera Android 完全対応 あり	Safari iOS 完全対応 あり	Samsung Internet Android ?

凡例

完全対応  

完全対応

実装状況不明  

実装状況不明

関連情報

• <ellipse>