SVGによる円弧の描画サンプル(塗りつぶし)
描画方法
円の一部を直線でトリムした形状を描画します。
パス図形を使用し円弧の始点を指定し円弧の終点まで描画、zコマンドで直線で図形を閉じます。以下に記述例を示します。
<path d="M x1 y1 a r r 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コマンドにより指定するかカレントポジションを使用します。
円弧はA又はaコマンドを使用し、終点および傾き、描画方向等を指定する。Aとaの違いは終点の指定が絶対座標か始点に対する相対座標で指定するかの違いである。
zコマンドにより図形を閉じます。 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 d="M 0,0 L 78,-45 a 90 90 -30 0 1 0 90 z" fill="red" stroke="black"/>
</svg>
</body>
</html>
