SVGハーフサークル：なぜ回転していますか？

Question

私はSVG要素を試しています。私は単純な半円を作成しようとしていますが、私の半円は何らかの理由で回転していますか？ハーフサークルを回転させないにはどうすればいいですか？

私の方法は次のとおりです。

• SVG 'キャンバス' は400ピクセルによって400で、th0e半分円は180ピクセル
• のMoveToポイントの半径を持つことになります：20200 - M20,200
• LineTo：線を360px長く描画します&はyの位置を変更しません - L360,0
• 円：円を完成させるために円弧を描き、半径

  <svg width="400" height="400"> 
      <path d="M20,200 L360,0 A180,180 0 0,1 20,200 z" 
       style="fill:#ff0000; 
        fill-opacity: 1; 
        stroke:black; 
        stroke-width: 1"/> 
  </svg> 
  

  PS：私は唯一の275degreesで円グラフを作成したい場合は、最良の方法だろう、これはコードでA180,180 0 0,1 20,200

- アークは180ピクセルです2つのパス、1つの180度（上記の半円）&別のパスは90度ですか？または、1 Pathでこれを作成することは可能ですか？ SVGコードの例を示すのに十分親切な人はいますか？

Answer 1

大文字のL（L）は絶対座標を指定し、小文字のL（l）は相対移動を指定します。あなたは相対的なコマンドを使いたいと思うようです。

は限り例として、W3 path's pageに円グラフ状のものは、単一のパスを使用する：

注

<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" 
    fill="red" stroke="blue" stroke-width="5" /> 

この画像における赤色部分を生成します小文字（相対）コマンドの自由使用。