Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

基本図形 SVGで四角形を描く 2

前回作った基本的な四角形（正方形）に背景色や枠線を設定します。

背景色

SVG_背景色

fill属性に色を設定すると背景色を変えることができます。設定しない場合は黒で塗られます（初期値）。

<rect width="200" height="200" fill="#EA4D60" />

参考リンク

枠線の設定

線の幅・太さ

svg_線の太さ・幅

枠線の設定はstroke属性を使います。stroke属性に色を指定することで枠線への塗りが行われます。stroke-width属性で幅・太さを設定できます。

<rect width="200" height="200" fill="#EA4D60" stroke="#49C5DD" stroke-width="10" />

線の種類

破線

svg_破線

stroke-dasharray="20 10"とすることで、線の長さを20、空白（gap）の長さを10にしています。

<rect x="10" y="10" width="180" height="180" fill="#EA4D60" stroke-dasharray="20 10" stroke="#49C5DD" stroke-width="5" />

点線

svg_点線

stroke-linecap属性にroundを設定すると角を丸めてくれます。

<svg width="200" height="200">
	<rect stroke="#49C5DD" stroke-linecap="round" stroke-dasharray="1 11" stroke-width="10" fill="#EA4D60" x="10" y="10" width="180" height="180"></rect>
</svg>

参考リンク