ellipse

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 座標。
Value type: <length>|<percentage> ; デフォルト値: 0; アニメーション: yes
cy
楕円の y 座標。
Value type: <length>|<percentage> ; デフォルト値: 0; アニメーション: yes
rx
x 軸の半径。
Value type: auto|<length>|<percentage> ; デフォルト値: auto; アニメーション: yes
ry
y 軸の半径。
Value type: auto|<length>|<percentage> ; デフォルト値: auto; アニメーション: yes
pathLength
この属性は、使用単位での単位合計パス長さを指定します。
Value type: <number> ; デフォルト値: none; アニメーション: yes

注記: SVG2 以降、cxcyrxry は、Geometry Properties であり、これらの属性は要素の CSS プロパティとして使用することもできます。

グローバル属性

コア属性
注目すべき属性: id, tabindex
スタイリング属性
class, style
条件処理属性
注目すべき属性: requiredExtensions, systemLanguage
イベント属性
グローバルイベント属性Graphical イベント属性
プレゼンテーション属性
注目すべき属性: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA 属性
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

使用可能な場所

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

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<ellipse> の定義
勧告候補 rxryauto を追加
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<ellipse> の定義
勧告 最初の定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ellipseChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
cxChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
cyChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
rxChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
ryChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報