Welcome
自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。
基本図形 SVGで円を描く 2
前回作った基本的な円（丸）に背景色や枠線を設定します。
背景色の設定
背景色を設定するにはfill属性を使います。設定しない場合は黒で塗られます（初期値）。
<circle cx="100" cy="100" r="100" fill="green" />
参考リンク
枠線の設定
線の幅・太さ
枠線の設定はstroke属性を使います。stroke属性に色を指定することで枠線への塗りが行われます。stroke-width属性で幅・太さを設定できます。
<circle cx="100" cy="100" r="90" stroke="orange" stroke-width="10" />
参考リンク
線の種類
破線
線の長さを20、空白（gap）の長さを10にしています。
<circle cx="100" cy="100" r="95" stroke="skyblue" stroke-dasharray="20 10" stroke-width="5" />
点線
stroke-linecap属性にroundを設定すると角を丸めてくれます。
<circle cx="100" cy="100" r="95" stroke="skyblue" stroke-dasharray="1 25" stroke-linecap="round" stroke-width="10" />