Latest web development tutorials

SVG楕円

SVGの楕円 - <楕円>

例1

LT;楕円>要素は、楕円を作成するために使用されます:

オーバルラウンドは非常に似ています。 楕円は、xとyの異なる半径を有しており、円のxおよびy半径は同じであることを除いて

ここではSVGのコードは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

»をお試しください

オペラユーザーの場合: ビューSVGファイル (プレビューソースSVGグラフィック上で右クリックします)。

コード解析:

  • X楕円の中心を定義したCX属性を座標
  • yはCY座標属性は、楕円の中心を定義します
  • 水平半径RX属性定義
  • 垂直半径RY属性定義

例2

次の例では、3つの楕円形に山盛り作成します。

ここではSVGのコードは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>

»をお試しください

オペラユーザーの場合: ビューSVGファイル (プレビューソースSVGグラフィック上で右クリックします)。


例3

次の例は、2つの楕円(黄色と白)を組み合わせました:

ここではSVGのコードは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>

»をお試しください

オペラユーザーの場合: ビューSVGファイル (プレビューソースSVGグラフィック上で右クリックします)。