Welcome

カキノタblog

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

基本図形 SVGで円を描く

SVGで円を描く基本的な書き方です。黒枠部分のコードは省略しています（svg要素にborderを設定）。

SVG-基本的な円

ソースコード

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

<circle cx="100" cy="100" r="100" />

</svg>

ノート

SVGで円を描くにはcircle要素を使います。ここに各属性を指定することで円を定義できます。

cx 円の中心のX座標。
cy 円の中心のY座標。
r 円の半径。

参考リンク