<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.
<ellipse>
要素は SVG の基本的な図形であり、中心となる座標と x 方向と y 方向の半径両方を指定し、楕円を生成します。
メモ: 楕円要素は楕円の傾きを指定することはできません(例えば、45 度の角度で傾斜した楕円を描画したい場合)が、transform
属性を使用することで回転させることは可能です。
例
<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 以降、cx
、cy
、rx
、ry
は、ジオメトリー属性であり、これらの属性は要素の CSS プロパティとして使用することもできます。
使用可能な場所
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # EllipseElement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- その他の SVG 基本図形:
<circle>
,<line>
,<polygon>
,<polyline>
,<rect>