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 以降、cx
、cy
、rx
、ry
は、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> の定義 |
勧告候補 | rx と ry に auto を追加 |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <ellipse> の定義 |
勧告 | 最初の定義 |
ブラウザー実装状況
BCD tables only load in the browser
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.
関連情報
- その他の SVG 基本図形:
<circle>
,<line>
,<polygon>
,<polyline>
,<rect>