SVG 円のサンプル

SVGを使って円や楕円を作ります。SVGでは円の作り方は複数あって、用途によって使い分けるとよいと思います。

まずは単純な円を作るcircleタグ。


<svg width=200 height=200 class="bg">
    <circle cx="100" cy="100" r="90" stroke="black" stroke-width="1" fill="blue"/>
</svg>

cx=円の中心のX座標

cy=円の中心のY座標

r=円の半径 (rx=半径横指定 ry=半径縦指定)

円弧で円を描く


<svg width=200 height=200 class="bg">
    <path d="M 25,100 A 75,75 0 1,1 175,100 A 75,75 0 1,1 25,100 z" stroke="black" fill="green"/>
</svg>

円弧をだけを描く


<svg width=200 height=200 class="bg">
<path stroke="black" fill="none" d="
M 0,0
A 200,200 0 0 0 200,200
"></path>
</svg>

四角の角を丸くして円を描く


<svg width=200 height=200 class="bg">
    <rect x="10" y="10" width="120" height="120" rx="60" ry="60" stroke="black" stroke-width="1" fill="none"/>
</svg>
2017-07-17 15:53:26

関連するサンプル

人気記事ランキング

© 2018 kipure