SVGによる円弧の描画サンプル

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

円弧の描画方法

SVGで円弧を描く場合はパス図形を使用します。以下に記述例を示します。 
<path d="M x1 y1  A  rx ry start f1 f2 x2,y2" fill="none" stroke="black" />
<path d="M x1 y1  a  rx ry start f1 f2 dx,dy" fill="none" stroke="black" />
<path d="a  rx ry start f1 f2 dx,dy" />
記述例のパラメーターは下記のとおりです 
円弧始点:(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の違いは終点の指定が絶対座標か始点に対する相対座標で指定するかの違いである。
x軸とy軸別々に半径を指定できるので楕円を描画することもできます。
線の色はstrokeで指定しています。線種の詳細な設定はSVGによる線種の設定を参照してください。
塗りつぶしはfillで指定できますが円弧ですので、塗りつぶし無しを指定します。

傾き

傾きの効果を下図に示します。
黒が傾き0度、赤が傾き30度、青が傾き-30度です。
(0,0) (0,-100) (0,100) (-100,0) (100,0) SVGの代替画像
上図のSVGソースコードは以下のとおりです。 
<path d="M 20,0 a 20 40 0 1 1 0 40" fill="none" stroke="black"/>
<path d="M 20,0 a 20 40 30 1 1 0 40" fill="none" stroke="red"/>
<path d="M 20,0 a 20 40 -30 1 1 0 40" fill="none" stroke="blue"/>

フラグ

円弧は始点と終点を指定しますが、この2点を通る円弧は4通り想定されます。4通りの中から望む円弧を選択するためにf1とf2があります。
f1(Large Arc Sweep Flag)は円弧の角度により0か1を選択します。
f2(Sweep Flag)は始点から右回りで描画するか左回りで描画するかを選択します。
f1とf2の組み合わせの結果は下図のとおりです。
下図の黄色い点が円弧の始点、水色の点が円弧の終点です。
Sweep Flag 0 1 0 1 Large Arc Sweep Flag SVGの代替画像

フォームより中心、半径、開始角度、終了角度(右回り)を入力して実際に描画してみる

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

中心cx= 中心cy=
半径R=
開始角度S=度
終了角度E=度


ソース=

(0,0) (0,-100) (0,100) (-100,0) (100,0) SVGの代替画像

0,0を中心とする12時(-90度)の方向から右回りに6時(90度)の方向まで半径90の円弧を描画

<path d="M 0 -90 a 90 90 -90 1 1 0 180" fill="none" stroke="black"/>
(0,0) (0,-90) (0,90) SVGの代替画像

0,0を中心とする3時の方向から右回りに12時の方向まで半径90の円弧を描画

<path d="M 90 0 a 90 90 0 1 1 -90 -90" fill="none" stroke="black"/>
(0,0) (0,-90) (90,0) SVGの代替画像

0,0を中心とする2時の方向から右回りに4時の方向まで半径90の円弧を描画

<path d="M 77.9 -45 a 90 90 -30 0 1 0 90" fill="none" stroke="black"/>
(0,0) (77.9,-45) (77.9,45) SVGの代替画像

フォームが初期表示状態の場合と同じ図形を描画する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 77.9 -45 a 90 90 -30 0 1 0 90" fill="none" stroke="black"/>
  </svg> 
</body> 
</html>