<ellipse>

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.

<ellipse> 要素は SVG の基本的な図形であり、中心となる座標と x 方向と y 方向の半径両方を指定し、楕円を生成します。

メモ: 楕円要素は楕円の傾きを指定することはできません(例えば、45 度の角度で傾斜した楕円を描画したい場合)が、transform 属性を使用することで回転させることは可能です。

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

属性

cx

楕円の中心の x 座標。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション:

cy

楕円の中心の y 座標。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション:

rx

楕円の x 軸の半径。 値の型: auto|<length>|<percentage> ; 既定値: auto; アニメーション:

ry

楕円の y 軸の半径。 値の型: auto|<length>|<percentage> ; 既定値: auto; アニメーション:

pathLength

この属性は、使用単位でのパスの全長を指定します。 値の型: <number> ; 既定値: none; アニメーション:

メモ: SVG2 以降、cxcyrxry は、ジオメトリー属性であり、これらの属性は要素の CSS プロパティとして使用することもできます。

使用可能な場所

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# EllipseElement

ブラウザーの互換性

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
ellipse
cx
cy
fill
context-fill value
rx
ry
systemLanguage

Legend

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

Full support
Full support
No support
No support

関連情報