ellipse

概要

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

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

使用可能な場所

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

例

» ellipse.svg

属性

グローバル属性

専用属性

DOM インターフェース

この要素は SVGEllipseElement インターフェースを提供します。

仕様

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

ブラウザ実装状況

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

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

最終更新日:

, by MDN contributors
関連トピック
  1. <image>
  2. <path>
  3. <ellipse>
  4. <line>
  5. <polyline>
  6. <rect>
  7. <use>
  8. SVG Elements
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    12. Q-R
      1. <radialGradient>
      2. <rect>
    13. S
      1. <script>
      2. <set>
      3. <stop>
      4. <style>
      5. <svg>
      6. <switch>
      7. <symbol>
    14. T
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    15. U
      1. <use>
    16. V-Z
      1. <view>
      2. <vkern>