SVG <ellipse>

<ellipse> タグは円を生成するために使用されます。

<ellipse> タグ

<ellipse> タグは円を生成するために使用されます。円と椭圆は非常に似ています。違いは、円の x と y の半径が同じであるのに対し、椭圆の x と y の半径が異なることです。

以下のコードをノートパッドにコピーして、ファイルを「ellipse1.svg」として保存してください。このファイルをウェブディレクトリに配置してください：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"> 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1">
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

コードの説明：

  • cx 属性は円点の x 座標を定義します
  • cy 属性は円点の y 座標を定義します
  • rx 属性は水平半径を定義します
  • ry 属性は垂直半径を定義します

例を表示

以下の例では、上から重なった3つの円を生成しました：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"> 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1">
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
</svg>

例を表示

以下の例では、二つの円（黄色のものと白色のもの）を組み合わせています：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"> 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1">
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>

例を表示