SVGによる扇形の描画サンプル(塗りつぶし)

icon 項目のみ表示/展開表示の切り替え

円の描画方法

SVGで円を描画するにはcircleを使用します。以下に記述例を示します。 
<circle cx="x" cy="y" r="r"   stroke="black" fill="none" >
記述例のパラメータは下記のとおりです。 
中心点:(x,y) r:半径

フォームより円の中心座標、半径を入力して実際に描画してみる

SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるように指定し てください

中心x=
中心y=
半径R=


ソース=

(0,0) (0,-100) (0,100) (-100,0) (100,0) (0,0)

初期状態と同じ図形を描画するhtmlソース

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <svg width="100" height="100"  viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="0" cy="0" r="80"  stroke="black" fill="none" >
    </svg>
</body> 
</html>