SVGによる扇形の描画サンプル(塗りつぶし)
扇形の描画方法
扇形を描画するにはパス図形を使用し中心から始点までの直線、円弧、終点から中心までの直線を組み合わせて扇形を描画し塗りつぶし指定を行います。 以下に記述例を示します。
<path d="M cx,cy L x1 y1 start rx ry start f1 f2 dx,dy z" fill="red" stroke="black" />
記述例のパラメーターは下記のとおりです。
円弧中心 cx,cy
円弧開始点:(x1,y1)円弧終点(x,y2) dx=x2-x1,dy=y2-y1
rx:x軸半径 ry:y軸半径
start:傾き(度) f1:[0の時180度以内の円弧、1の時180度以上の円弧] f2:[0の時反時計回り 1の時時計回り]
扇形の中心はMまたはmコマンドにより指定するかカレントポジションを使用します。
Lコマンドはカレントポジションから指定する絶対座標まで直線を描画します。
円弧はA又はaコマンドを使用し、終点および傾き、描画方向等を指定する。Aとaの違いは終点の指定が絶対座標か始点に対する相対座標で指定するかの違いである。
A又はaコマンドはx軸とy軸別々に半径を指定できるので楕円を描画することもできる。
zコマンドによりカレントポジションとパス図形の始点を直線で結び図形を閉じます。
フォームより中心、半径、開始角度、終了角度(右回り)を入力して実際に描画してみる
SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるような円弧を指定してください。
初期表示状態の同じ図形を表示する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">
<path id="arc1_cmd" d="M 0,0 L 78,-45 a 90 90 -30 0 1 0 90 z" fill="red" stroke="black"/>
</svg>
</body>
</html>
