用途
新着
履歴
分類

SVG 円のサンプル

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"></circle>
</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"></path>
</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="orange"></rect>
</svg>
公開 2019-08-02 23:46:55
このページの二次元コード
SVG 円のサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top