SVG楕円2024 年の最新の入門チュートリアル。このコースでは SVGの楕円 - <楕円>,例1,例,例2,例,例3,例, について学習できます。
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グラフィック上で右クリックします)。