SVG 教程

SVG要素

SVG <ellipse> 椭円を描画

SVG <ellipse>要素は円を描くために使用されます。円は高さと幅が異なる円です。他の言葉で言うと、xとy方向の半径が異なります。

SVG円の例

これは円を描くサンプルコードです:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse　cx="40"　cy="40"　rx="30"　ry="15"
　　　　　　　　　　　style="stroke:#006600;　fill:#00cc00"/>
</svg>

テストをしてみる ‹/›

実行結果は以下の通りです:

円cx、cyは円のように中央に配置されますが、xとy方向の半径は2つの属性（而不是1個）で指定されます：rxとry属性です。rx属性がry属性よりも高い値を持っているため、円は高さよりも幅が広くなります。rxとry属性を同じ数字に設定すると、円が生成されます。

stroke-枠線幅の設定

style属性strokeを使用して-widthは円の枠線の幅を設定します。例：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　#ff0000;stroke-width:　5;fill:　none;"/>
</svg>

テストをしてみる ‹/›

実行結果の画像は以下の通りです:

点線枠線円

style属性strokeを使用して-dasharrayにより円の線が点線になります。:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　#ff0000;stroke-width:　5;
　　　　　　　　　stroke-dasharray:　10　5;fill:　none;"/>
</svg>

テストをしてみる ‹/›

この例では点線の幅を10、点線のスペース（点線の間隔）は5。これは円をレンダリングする際の外観です:

透明な枠線

style属性strokeを使用して-opacityによりSVG円の枠線が半透明になります。

例

<svg　height="120">
　　　　<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　　　　　style="stroke:　#ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　fill:　none;"></ellipse>
　　　　<ellipse　cx="60"　cy="60"　rx="40"　ry="30"
　　　　　　　　　　　　　style="stroke:　#0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　stroke-opacity:　0.5;
　　　　　　　　　　　　　　　　　　　fill:　none;"></ellipse>
</svg>

テストをしてみる ‹/›

コードを実行するとSVG円の効果は以下の通りです:

注意、2番目の（青い）円は透明で、その線の下から赤い円が見える方法をご覧ください。

円の塗りつぶし

円を塗りつぶすためにfillスタイル属性を使用できます：

例

<svg　height="120">
<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　#ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill:　#ff6666;"/>
</svg>

テストをしてみる ‹/›

実行後のSVG円の外観は以下の通りです:

透過度のある塗りつぶし

fill-opacity スタイル属性は、円の填充色の不透明度（透明度）を設定するために使用できます：

例

<svg　height="120">
<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　#ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill:　none;"></ellipse>
<ellipse　cx="60"　cy="60"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　none;
　　　　　　　　　　　　　　　fill:　#0000ff;
　　　　　　　　　　　　　　　fill-opacity:　0.5;></ellipse>
</svg>

テストをしてみる ‹/›

円がレンダリングされる際の外観は以下の通りです:

注意、第2つの（青い）円は半透明で、赤い円が見えるようにしています。

SVG <line> 直線を描画 SVG <circle> 圆形を描画