SVG楕円
例 1
lt;ellipse> 要素を使用して楕円を作成します。
楕円は円に非常に似ています。違いは、楕円の x 半径と y 半径が異なるのに対し、円は x 半径と y 半径が同じであることです:
SVG コードは次のとおりです:
Example
<!DOCTYPE html> <html> <body> <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> </body> </html>
例の実行»
[インスタンスの実行] をクリックします。 " ボタンをクリックして、オンラインの例を表示します
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。
コード分析:
CX属性によって定義される楕円中心のx座標
CY属性によって定義される楕円中心のy座標
RXによって定義される水平半径属性
RY 属性定義
の垂直方向の半径 例 2
次の例では、3 つの積み重ねられた楕円を作成します。
これは
例です:例 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。 例 3
次の例では、2 つの楕円形 (黄色と白) を組み合わせています:
SVG コードは次のとおりです:
Example
<!DOCTYPE html> <html> <body> <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> </body> </html>
例の実行»
「例の実行」をクリックします」ボタンをクリックすると、オンラインの例が表示されます
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。
