<ellipse>

使用コンテキスト

属性

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; アニメーション: 可

例

html,
body,
svg {
  height: 100%;
}

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

仕様書

ブラウザーの互換性

関連情報

• その他の SVG 基本図形: <circle>, <line>, <polygon>, <polyline>, <rect>