SVGチュートリアル

SVG 元素

SVG<circle>で円を描画

<circle> SVG要素はSVGの基本形状の一つで、円を描画するために使用されます。円心と半径を基に描画され、strokeとfill属性を使用して円に実線の縁取り、点線の縁取り、円の色の塗りつぶしを行うことができます。

SVG <circle>要素は円を描画するために使用されます。以下は簡単な例です:

例

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24" style="stroke:#006600; fill: #00cc00"/>
</svg>

テストを見てみましょう ‹/›

これは実行結果の画像です

この円はcx, cyが中心で、rが半径の点で描かれています。cx、cy、およびrは<circle>要素の属性です。

圆形描边

SVG円の筆跡（輪郭）をSVG strokeスタイル属性で設定できます。このページの最初の例では、筆跡が#00に設定されています。6600深緑色です。ただし、筆跡の色を設定するだけでなく、他にも設定することができます。strokeを使用して、以下のように設定できます:-widthstyle属性を使用して筆跡の幅を設定します。以下の例を参照してください:

例

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　fill: #00cc00"/></svg>

テストを見てみましょう ‹/›

実行後の円の外観は以下のようになります:

strokeを使用することもできます-dasharray属性を使用して点線で枠線を描画します。以下の例を参照してください:

例

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　fill: #00cc00"/></svg>

テストを見てみましょう ‹/›

これはレンダリングされた外観です:

円の枠線（輪郭）を削除して、塗りつぶし色のみで円を塗りつぶすこともできます。以下の例のコードを参照してください:

例

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: #"
　　　　　　　　　　　fill: #00cc00"/></svg>

テストを見てみましょう ‹/›

枠線がない円の実行後の効果は以下のようになります:

Circle Fill

fillスタイル属性は円の塗りつぶし方法を制御します。fill属性をnoneに設定することで、完全に塗りつぶしをしないことができます。
以下に例を示します:

塗りつぶしなしの円の外観は以下のようになります:

fill属性を使用して塗りつぶし色を設定できます。本文の前述の例のように、以下のようになります:

例

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: #"660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

テストを見てみましょう ‹/›

円を描画し、塗りつぶし色の外観は以下のようになります:

fillを使用することもできます-opacity style属性で塗りつぶしを透明に設定します。以下の例では、2つの円が描かれており、そのうちの1つがもう1つの円の上に部分で重なっており、半透明です。

例

<svg　height="80px">
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:　#660000;
　　　　　　　　　　　　　　　　　　　fill:　#cc0000;
　　　　　　　　　　　　></circle>
　　　　<circle　cx="64"　cy="40"　r="24"　style="stroke:　#000099;
　　　　　　　　　　　　　　　　　　　fill:　#0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　　　　　></circle>
</svg>

テストを見てみましょう ‹/›

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

ご注意ください、青（右）の円は内部が半透明です。ストロークも半透明にするにはstrokeを使用する必要があります。-opacitystyle属性。

SVG<ellipse>で楕円を描画 SVG<rect>で矩形を描画