SVGチュートリアル

SVG要素

SVG<rect>で矩形を描画

rect要素はSVGの基本形状であり、角の位置とその幅および高さに基づいて矩形を作成します。また、角丸矩形を作成することもできます。

SVG <rect>要素は矩形を表します。この要素を使用すると、さまざまな幅、高さ、線の太さ（輪郭）、塗り色、尖角または丸角などの矩形を描画できます。

オンラインの例

rectの使用例:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/></svg>

テストをしてみてください ‹/›

矩形の位置はxおよびy属性で決定されます。この位置は、どの閉じた（親）要素の位置に対しても相対的です。
矩形のサイズはwidthおよびheight属性で決定されます。
このstyle属性は、他のスタイル情報（例えば、ストロークと塗りつぶしの色、ストロークの幅など）を設定することができます。これについては他のテキストで詳細に説明します。
生成された矩形画像は以下の通りです：

角丸矩形

矩形に角丸を描画することができます。属性rxおよびryは、角の丸みを決定します。rx属性は丸みの幅を決定し、ry属性は丸みの高さを決定します。rxおよびryがそれぞれ以下に設定された三つの矩形があります：5、10および15。四捨五入の異なるサイズに注意してください。

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="5"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="70"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="10"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="15"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

テストをしてみてください ‹/›

生成された角丸矩形の効果は以下の通りです：

これらの例では、各矩形のrxおよびryが同じ値に設定されています。rx属性のみを設定すると、ry属性も同じ値のrxに設定されます。これは均一な角丸を定義する簡単な方法です。
rx属性がそれぞれ設定されたこれらの二つの矩形は以下の通りです：10、しかし、ry属性をそれぞれ以下に設定しています。5および15の例です。これは異なる高さと幅で、角丸矩形の外観を示します。

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

テストをしてみてください ‹/›

矩形の枠線

SVGのstrokeスタイル属性を使用して矩形の枠（輪郭）のスタイルを設定できます。この例では、strokeの色を濃い緑色にし、枠の幅を以下に設定しています：3:

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　fill:　none;
　　　　　　"
　　　　　　/></svg>

テストをしてみてください ‹/›

rectがブラウザで表示される時の、要素の外観効果は以下の通りです：

style属性のstrokeも使用できます。-dasharrayを使用すると、矩形の枠線が破線になります。以下に例を示します：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　　　fill:　none;
　　　　　　　　　　　　"
　　　　　　　　/></svg>

テストをしてみてください ‹/›

以下のコードの実行効果は以下の通りです::

矩形の塗りつぶし

SVGのfillスタイル属性を使用して矩形を塗りつぶすことができます。例えば、style属性のfillをnoneに設定することで、要素を塗りつぶさない選択ができます。

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"　
　　　　　　　　　　　　style="stroke:　#009900;fill:　none;"　/></svg>

テストをしてみてください ‹/›

rectがブラウザで表示される時の、塗りつぶしない要素の外観は以下の通りです：

矩形を色で塗りつぶすこともできます。この例では、rectが明るい緑色で要素を塗りつぶしています：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;fill:　#33ff33;"/>
</svg>

テストをしてみてください ‹/›

以下は、ブラウザでrectがフィルルされた時の表示効果です：

style属性のfillを使用することもできます。-opacityはフィルルの透明度を制御します。この例では、二つの矩形が示されており、一つの矩形がもう一つの矩形の上にあり、上の矩形は半透明です：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　fill:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　width="100"　height="100"
　　　　　　style="stroke:　#000099;
　　　　　　　　　fill:　#3333ff;
　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　"
　　　　　　　　/></svg>

テストをしてみてください ‹/›

これはrectがブラウザで表示される際の要素の半透明な外観効果です:

この例では、二番目の矩形のストロークは透明ではありませんが、style属性strokeを使用して-透明度を透明にします。

SVG<circle>で円を描画 SVG<g>要素