SVG 四角形のサンプル

SVGで四角形、正方形、長方形を描くときのサンプルを紹介します。

rectタグが用意されており、簡単にかけます。

<svg  width="100" height="100">
    <rect width="100" height="100" style="fill:red"/>
</svg>

枠線ありの場合

<svg  width="70" height="100">
    <rect width="70" height="100" style="fill:#00F;stroke:black;stroke-width:3"/>
</svg>

影をつけたい場合は、SVGで計算して複雑な記述を描くより、CSS3を使うほうが実用的です。

<svg  width="100" height="70">
    <rect width="100" height="70" style="fill:#0F0;" id="MyRect"/>
</svg>

<style>
#MyRect{
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
</style>